簡介

gulp是前端開發(fā)過程中對(duì)代碼進(jìn)行自動(dòng)化構(gòu)建的工具置吓，它不僅能對(duì)網(wǎng)站資源進(jìn)行優(yōu)化衍锚，而且在開發(fā)過程中能避免很多重復(fù)的工作戴质，比如對(duì)相關(guān)文件的操作戈抄，還有自動(dòng)監(jiān)視一些文件的變化等功能划鸽。

構(gòu)建流程

Node.js安裝

gulp是基于Node開發(fā)環(huán)境運(yùn)行的，所以需要使用npm的包管理工具去安裝它戚哎。要使用npm裸诽，就必須安裝Node.js，可前往Node.js的官網(wǎng)下載：

http://nodejs.cn/download/

下載并安裝完成后建瘫，運(yùn)行Node.js command prompt并輸入命令：

node -v  // 出現(xiàn)版本號(hào)即為node安裝成功
npm -v  // 出現(xiàn)版本號(hào)即為npm安裝成功

gulp安裝

安裝好Node.js之后崭捍，接著在Node.js command prompt中輸入命令：

npm install -g gulp         
// 全局安裝gulp，”-g”代表全局

gulp -v
// 出現(xiàn)版本號(hào)即為gulp安裝成功

cd 項(xiàng)目根目錄所在位置                   
// 進(jìn)入到項(xiàng)目根目錄 

npm init                    
// 初始化項(xiàng)目啰脚，之后是一連串的信息填寫殷蛇，最后生成package.json

npm install gulp --save-dev 
// 項(xiàng)目安裝gulp依賴
// --save的作用是將配置信息保存至package.json文件中
// -dev的作用是保存至package.json中的devDependencies對(duì)象內(nèi)实夹，不指定則會(huì)保存到dependencies對(duì)象中

如果對(duì)于前端自動(dòng)化構(gòu)建工具熟悉的朋友應(yīng)該知道，package.json定義了項(xiàng)目所需要的各種模塊粒梦，以及項(xiàng)目的配置信息亮航，接下來我主要對(duì)這個(gè)文件的內(nèi)容進(jìn)行介紹（PS：規(guī)范的package.json不能出現(xiàn)注釋）：

{
  "name": "test",               //項(xiàng)目名稱
  "version": "1.0.0",           //項(xiàng)目版本
  "description": "This is my first gulp project !",   //項(xiàng)目描述
  "homepage": "index.js",               //項(xiàng)目主頁
  "repository": {             
    "type": "git",                      //倉庫類型
    "url": "https://git.oschina.net/xxxx"              //倉庫地址
  },
  "scripts": {
    "dev": "cross-env NODE_ENV=dev gulp dev",
    "build": "cross-env NODE_ENV=production gulp build"
  },
  "author": {                 
    "name": "alolonghun",          //作者名
    "email": "906268297@qq.com"    //作者郵箱
  },
  "license": "ISC",                //項(xiàng)目許可協(xié)議
  "devDependencies": {             //項(xiàng)目開發(fā)環(huán)境依賴的插件
    "gulp": "^3.9.1",
    "gulp-less": "^3.3.2",
    "gulp-sass": "^3.1.0",
    "cross-env": "^5.0.5",
    "del": "^3.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-uglify": "^3.0.0",
    "webpack": "^3.5.5"
  },
  "dependencies": {             //項(xiàng)目生產(chǎn)環(huán)境依賴的插件
    ...
  }
}

如果對(duì)于package.json文件還有什么不理解的，可以輸入以下命令獲取幫助：

npm help package.json

相關(guān)依賴插件的安裝

依然在Node.js command prompt中操作：

npm install gulp-less cross-env del gulp-concat gulp-uglify webpack --save-dev
//一次性可安裝多個(gè)依賴插件

這里要注意一下：
由于網(wǎng)絡(luò)原因匀们，gulp-sass的安裝比較特殊缴淋，可能會(huì)安裝失敗，因?yàn)榘惭b過程中部分細(xì)節(jié)會(huì)到亞馬遜云服務(wù)器上獲取文件泄朴，獲取失敗則安裝不了重抖。
詳細(xì)安裝過程如下：
執(zhí)行安裝gulp-sass命令，這個(gè)過程中會(huì)先安裝 node-sass 祖灰，因?yàn)?gulp-sass 依賴于 node-sass 钟沛。中間出現(xiàn)的錯(cuò)誤信息類似下面這條：
Cannot download https://github.com/sass/node-sass/releases/download/v3.4.2/win32-x64-46_bind
現(xiàn)象是這些二進(jìn)制文件使用了GitHub的lfs 服務(wù)，而lfs使用的是亞馬遜云局扶，由于網(wǎng)絡(luò)原因恨统，這些服務(wù)器無法訪問。
解決方法有以下三種：

方法一：進(jìn)入項(xiàng)目根目錄三妈，執(zhí)行命令（最簡單的方法）：
npm install --save-dev gulp-sass@latest

方法二：首先全局環(huán)境下配置淘寶鏡像（PS：這里是全局環(huán)境畜埋，不是項(xiàng)目根目錄）
執(zhí)行語句：npm install -g cnpm --registry=https://registry.npm.taobao.org
然后進(jìn)入項(xiàng)目根目錄，執(zhí)行語句：cnpm install --save-dev node-sass
仍然是項(xiàng)目根目錄畴蒲，執(zhí)行語句： npm install --save-dev gulp-sass

方法三：下載源碼悠鞍，然后自己編譯一個(gè)二進(jìn)制文件或翻墻下載一個(gè)官方的二進(jìn)制文件，來解決該文件的下載問題模燥，之后就能順利安裝gulp-sass了狞玛。
可參考：http://blog.csdn.net/jimmyhandy/article/details/50723174

編寫gulpfile.js文件

gulpfile.js是gulp項(xiàng)目的配置文件，負(fù)責(zé)配置編譯打包等相關(guān)任務(wù)涧窒，gulpfile.js類似JS的語法心肪，也支持ES6，具體可參照gulp.js官網(wǎng)的語法：

http://www.gulpjs.com.cn/docs/api/

這里簡單介紹一下gulpfile.js：

// 使用 require('node_modules里對(duì)應(yīng)模塊') 的語法
// 引入gulp
var gulp = require('gulp');

//導(dǎo)入相關(guān)插件包 
var less = require('gulp-less'),
    sass = require('gulp-sass'),
    minifycss = require('gulp-minify-css'),
    concat = require("gulp-concat"),
    uglify = require("gulp-uglify"),
    del = require("del");
 
// "./src/a.js"：當(dāng)前目錄中src目錄下的a.js文件;
// "*"：匹配所有文件            例：src/*.js(包含src下的所有js文件);
// "**"：匹配0個(gè)或多個(gè)子文件夾   例：src/**/*.js(包含src的0個(gè)或多個(gè)子文件夾下的js文件);
// "{}"：匹配多個(gè)屬性           例：src/{a,b}.js(包含a.js和b.js文件)  src/*.{jpg,png,gif}(src下的所有jpg/png/gif文件);
// "!"：排除文件                例：!src/a.js(不包含src下的a.js文件);
var src = {
    images: './src/**/*.{png,jpg,jpeg,svg}',
    js: './src/**/*.js',
    less: './src/**/*.less',
    scss: './src/**/*.scss'
};

// gulp.task(name[, deps], fn) 定義任務(wù)  name：任務(wù)名稱 deps：依賴任務(wù)名稱 fn：回調(diào)函數(shù)
// gulp.src(globs[, options]) 執(zhí)行任務(wù)處理的文件  globs：處理的文件路徑(字符串或者字符串?dāng)?shù)組) 
// gulp.dest(path[, options]) 處理完后文件生成路徑
// gulp.watch(glob[, opts], tasks) 監(jiān)視文件纠吴，并且可以在文件發(fā)生改動(dòng)時(shí)候做一些事情硬鞍。
// 注意：gulp.run()方法已被廢棄

// 創(chuàng)建一個(gè)"clean"任務(wù)，作用是在編譯文件之前清空dist目錄下的文件 
gulp.task('clean', function(cb) { 
    return del([
        './dist/**/*'
    ], cb); 
});

// sass 任務(wù)會(huì)編譯scss文件戴已，并把編譯完成的css文件保存到指定目錄中
 gulp.task('sass',function () {
     gulp.src(src.scss)
         .pipe(sass({outputStyle: 'compact'}))     //sass轉(zhuǎn)css
         .pipe(minifycss())                        //壓縮css
         .pipe(gulp.dest("./dist/css"));           //輸出到./dist/css目錄下
 });

// 同上固该，創(chuàng)建一個(gè)名為"less"的任務(wù)
gulp.task(less', function () {
    gulp.src(src.less)                  
        .pipe(less())                     //less轉(zhuǎn)css
        .pipe(minifycss())                //壓縮css
        .pipe(gulp.dest('./dist/css'));   //輸出到./dist/css目錄下
});

// 合并，壓縮文件
// scripts任務(wù)會(huì)合并所有js文件糖儡，壓縮合并后的文件伐坏，輸出到dist目錄。
 gulp.task('scripts',function () {
     gulp.src(src.js)
         .pipe(concat('index.js'))         //合并所有js文件到index.js
         .pipe(uglify())                   //壓縮合并后的文件
         .pipe(gulp.dest("./dist"))        //輸出到dist目錄下
 });

//創(chuàng)建dev任務(wù)
 gulp.task('dev',function(){
    // 監(jiān)聽文件變化
     gulp.watch("src/**/*", ['sass', 'less', 'scripts']);
 });
 
//創(chuàng)建build任務(wù)握联，關(guān)聯(lián)和運(yùn)行上面定義的任務(wù)
gulp.task('build', ['sass', 'less', 'scripts']); 

程序運(yùn)行及打包

運(yùn)行命令：npm run dev
打包命令：npm run build