使用Gulp構建前端自動化

Gulp簡介

gulp是前端開發過程中一種基於流的代碼構建工具，是自動化項目的構建利器；她能自動化地完成 javascript、coffee、sass、less、html/image、css等文件的測試、檢查、合併、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件在改動後重復指定的這些步驟。在實現上，她借鑑了Unix操作系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，使得在操作上非常簡單。

特點：
- 易於使用：通過代碼優於配置的策略，gulp 讓簡單的任務簡單，複雜的任務可管理。
- 構建快速：利用 Node.js 流的威力，你可以快速構建項目並減少頻繁的 IO 操作。
- 易於學習：通過最少的 API，掌握gulp毫不費力，如同一系列流管道。
- 插件豐富：gulp 嚴格的插件指南確保插件如你期望的那樣簡潔高質得工作。

安裝

首先確保你已經正確安裝了nodejs環境。然後以全局方式安裝gulp：

npm install -g gulp

全局安裝gulp後，還需要在每個要使用gulp的項目中都單獨安裝一次。把目錄切換到你的項目文件夾中，然後在命令行中執行：

npm install gulp

如果想在安裝的時候把gulp寫進項目package.json文件的依賴中，則可以加上–save-dev：

npm install --save-dev gulp

這樣就完成了gulp的安裝，接下來就可以在項目中應用gulp了。

使用

第一步：建立gulpfile.js文件

gulp需要一個文件作爲它的主文件，這個文件就是gulpfile.js。新建一個文件名爲gulpfile.js的文件，然後放到你的項目目錄中。之後要做的事情就是在gulpfile.js文件中定義任務。下面是一個最簡單的gulpfile.js文件內容示例，它定義了一個默認的任務。

var gulp = require('gulp');
gulp.task('default',function(){
    console.log('hello world');
});

第二步：運行gulp任務

要運行gulp任務，只需切換到存放gulpfile.js文件的目錄，然後在命令行中執行gulp命令就行了，gulp後面可以加上要執行的任務名，例如gulp task1，如果沒有指定任務名，則會執行任務名爲default的默認任務。

常用方法

src()

gulp.src()方法正是用來獲取流的，但要注意這個流裏的內容不是原始的文件流，而是一個虛擬文件對象流，這個虛擬文件對象中存儲着原始文件的路徑、文件名、內容等信息。其語法爲：

gulp.src(globs[, options]);

globs參數是文件匹配模式(類似正則表達式)，用來匹配文件路徑(包括文件名)，當然這裏也可以直接指定某個具體的文件路徑。當有多個匹配模式時，該參數可以爲一個數組;類型爲String或 Array.

options爲可選參數。

options.buffer

類型： Boolean 默認值： true

　　如果該項被設置爲 false，那麼將會以 stream 方式返回 file.contents 而不是文件 buffer 的形式。這在處理一些大文件的時候將會很有用。注意：插件可能並不會實現對 stream 的支持。

options.read

類型： Boolean 默認值： true

如果該項被設置爲 false， 那麼 file.contents 會返回空值（null），也就是並不會去讀取文件。

options.base

類型： String ， 設置輸出路徑以某個路徑的某個組成部分爲基礎向後拼接。

例如在一個路徑爲 client/js/somedir 的目錄中，有一個文件叫 somefile.js ：

gulp.src('client/js/**/*.js') // 匹配 'client/js/somedir/somefile.js' 現在 `base` 的值爲 `client/js/`
  .pipe(minify())
  .pipe(gulp.dest('build'));  // 寫入 'build/somedir/somefile.js' 將`client/js/`替換爲build

gulp.src('client/js/**/*.js', { base: 'client' }) // base 的值爲 'client'
  .pipe(minify())
  .pipe(gulp.dest('build'));  // 寫入 'build/js/somedir/somefile.js' 將`client`替換爲build

desk()

gulp.dest()方法是用來寫文件的，其語法爲：

gulp.dest(path[,options])

path爲寫入文件的路徑；options爲一個可選的參數對象，以下爲選項參數：

options.cwd

類型： String 默認值： process.cwd()

輸出目錄的 cwd 參數，只在所給的輸出目錄是相對路徑時候有效。

options.mode

類型： String 默認值： 0777

八進制權限字符，用以定義所有在輸出目錄中所創建的目錄的權限。

var gulp = require('gulp');
gulp.src('script/jquery.js')　       // 獲取流
    .pipe(gulp.dest('dist/foo.js')); // 寫放文件

下面再說說生成的文件路徑與我們給gulp.dest()方法傳入的路徑參數之間的關係。 　　gulp.dest(path)生成的文件路徑是我們傳入的path參數後面再加上gulp.src()中有通配符開始出現的那部分路徑。例如：

var gulp = reruire('gulp');
//有通配符開始出現的那部分路徑爲 **/*.js
gulp.src('script/**/*.js')
    .pipe(gulp.dest('dist')); //最後生成的文件路徑爲 dist/**/*.js
//如果 **/*.js 匹配到的文件爲 jquery/jquery.js ,則生成的文件路徑爲 dist/jquery/jquery.js

用gulp.dest()把文件流寫入文件後，文件流仍然可以繼續使用。

watch()

gulp.watch()用來監視文件的變化，當文件發生變化後，我們可以利用它來執行相應的任務，例如文件壓縮等。其語法爲

gulp.watch(glob[, opts], tasks); 

glob 爲要監視的文件匹配模式，規則和用法與gulp.src()方法中的glob相同。 opts 爲一個可選的配置對象，通常不需要用到。tasks爲文件變化後要執行的任務，爲一個數組。

gulp.task('uglify',function(){
  //do something
});
gulp.task('reload',function(){
  //do something
});
gulp.watch('js/**/*.js', ['uglify','reload']);

gulp.watch()還有另外一種使用方式：

gulp.watch(glob[, opts, cb]);

glob和opts參數與第一種用法相同;

cb參數爲一個函數。每當監視的文件發生變化時，就會調用這個函數,並且會給它傳入一個對象，該對象包含了文件變化的一些信息，type屬性爲變化的類型，可以是added,changed,deleted；path屬性爲發生變化的文件的路徑。

gulp.watch('js/**/*.js', function(event){
    console.log(event.type); //變化類型added爲新增,deleted爲刪除，changed爲改變 
    console.log(event.path); //變化的文件的路徑
}); 

task()

gulp.task()方法用來定義任務，內部使用的是Orchestrator(用於排序、執行任務和最大併發依賴關係的模塊)，其語法爲：

gulp.task(name[, deps], fn)

name 爲任務名；

deps 是當前定義的任務需要依賴的其他任務，爲一個數組。當前定義的任務會在所有依賴的任務執行完畢後纔開始執行。如果沒有依賴，則可省略這個參數；

fn 爲任務函數，任務執行的代碼都寫在裏面。該參數也是可選的。

當你定義一個簡單的任務時，需要傳入任務名字和執行函數兩個屬性。

gulp.task('greet', function () {
   console.log('Hello world!');
});

執行gulp greet的結果就是在控制檯上打印出“Hello world”。

你也可以定義一個在gulp開始運行時候默認執行的任務，並將這個任務命名爲default：

gulp.task('default', function () {
   // Your default task
});

當有多個任務時，可以通過任務依賴來控制任務的執行順序。

例如執行one,two,three這三個任務，那我們就可以定義一個空的任務，然後把那三個任務當做這個空的任務的依賴就行了：

//只要執行default任務，就相當於把one,two,three這三個任務執行了
gulp.task('default',['one','two','three']);

如果任務相互之間沒有依賴，任務就會按你書寫的順序來執行，如果有依賴的話則會先執行依賴的任務。但是如果某個任務所依賴的任務是異步的，就要注意了，gulp並不會等待那個所依賴的異步任務完成，而是會接着執行後續的任務。例如：

gulp.task('one',function(){
  //one是一個異步執行的任務
  setTimeout(function(){
    console.log('one is done')
  },5000);
});

//two任務雖然依賴於one任務,但並不會等到one任務中的異步操作完成後再執行
gulp.task('two',['one'],function(){
  console.log('two is done');
});

上面的例子中執行two任務時，會先執行one任務，但不會去等待one任務中的異步操作完成後再執行two任務，而是緊接着執行two任務。所以two任務會在one任務中的異步操作完成之前就執行了。

那如果我們想等待異步任務中的異步操作完成後再執行後續的任務，該怎麼做呢？

有三種方法可以實現：

第一：在異步操作完成後執行一個回調函數來通知gulp這個異步任務已經完成,這個回調函數就是任務函數的第一個參數。

gulp.task('one',function(cb){ //cb爲任務函數提供的回調，用來通知任務已經完成
  //one是一個異步執行的任務
  exec(function(){
    console.log('one is finish');
    cb();  //執行回調，表示這個異步任務已經完成
  },5000);
});

//這時two任務會在one任務中的異步操作完成後再執行
gulp.task('two',['one'],function(){
  console.log('two is finish');
});

第二：定義任務時返回一個流對象。適用於任務就是操作gulp.src獲取到的流的情況。

gulp.task('one',function(cb){
  var stream = gulp.src('client/**/*.js')
      .pipe(exec()) //exec()中有某些異步操作
      .pipe(gulp.dest('build'));
    return stream;
});

gulp.task('two',['one'],function(){
  console.log('two is done');
});

第三：返回一個promise對象，例如

var Q = require('q');
gulp.task('one', function() {
  var deferred = Q.defer();

  // 執行異步的操作
  setTimeout(function() {
    deferred.resolve();
  }, 1);
  return deferred.promise;
});

gulp.task('two',['one'],function(){
  console.log('two is done');
});

run()

gulp.run()表示要執行的任務。可能會使用單個參數的形式傳遞多個任務。如下代碼：

gulp.task('end',function(){
    gulp.run('task1','task3','task2');
});

注意：任務是儘可能多的並行執行的，並且可能不會按照指定的順序運行。

常用插件

自動加載

gulp-load-plugins這個插件能自動幫你加載package.json文件裏的gulp插件。例如假設package.json文件裏的依賴是這樣的:

{
  "devDependencies": {
    "gulp": "~3.6.0",
    "gulp-rename": "~1.2.0",
    "gulp-ruby-sass": "~0.4.3",
    "gulp-load-plugins": "~0.5.1"
  }
}

然後我們可以在gulpfile.js中使用gulp-load-plugins來幫我們加載插件：

var gulp = require('gulp');
//加載gulp-load-plugins插件，並馬上運行它
var plugins = require('gulp-load-plugins')();

然後我們要使用gulp-rename和gulp-ruby-sass這兩個插件的時候，就可以使用plugins.rename和plugins.rubySass來代替了,也就是原始插件名去掉gulp-前綴，之後再轉換爲駝峯命名。

重命名

gulp-rename插件用來重命名文件流中的文件。用gulp.dest()方法寫入文件時，文件名使用的是文件流中的文件名，如果要想改變文件名，那可以在之前用gulp-rename插件來改變文件流中的文件名。

var gulp = require('gulp'),
    rename = require('gulp-rename'),
    uglify = require("gulp-uglify");

gulp.task('rename', function () {
    gulp.src('src/1.js')
        .pipe(uglify())           //壓縮
        .pipe(rename('1.min.js')) //會將1.js重命名爲1.min.js
        .pipe(gulp.dest('js'));   // 壓縮後的路徑
});

js文件壓縮

gulp-uglify插件用來壓縮js文件。

var gulp = require('gulp'),
    uglify = require("gulp-uglify");

gulp.task('minify-js', function () {
    gulp.src('src/*.js')             // 要壓縮的js文件
        .pipe(uglify())              // 使用uglify進行壓縮
        .pipe(gulp.dest('dist/js')); 

css文件壓縮

gulp-minify-css插件用來壓縮css文件。

var gulp = require('gulp'),
    minifyCss = require("gulp-minify-css");

gulp.task('minify-css', function () {
    gulp.src('src/*.css')     // 要壓縮的css文件
        .pipe(minifyCss())    // 壓縮css
        .pipe(gulp.dest('dist/css'));
});

html文件壓縮

gulp-minify-html插件用來壓縮html文件。

var gulp = require('gulp'),
    minifyHtml = require("gulp-minify-html");

gulp.task('minify-html', function () {
    gulp.src('src/*.html')      // 要壓縮的html文件
        .pipe(minifyHtml())     // 壓縮
        .pipe(gulp.dest('dist/html'));
});

js代碼檢查

使用gulp-jshint插件，用來檢查js代碼。

var gulp = require('gulp'),
    jshint = require("gulp-jshint");

gulp.task('jsLint', function () {
    gulp.src('src/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter()); // 輸出檢查結果
});

文件合併

gulp-concat插件，用來把多個文件合併爲一個文件,我們可以用它來合併js或css文件等。

var gulp = require('gulp'),
    concat = require("gulp-concat");
gulp.task('concat', function () {
    gulp.src('src/*.js')          // 要合併的文件
        .pipe(concat('all.js'))   // 合併匹配到的js文件並命名爲 "all.js"
        .pipe(gulp.dest('dist/js'));
});

圖片壓縮

gulp-imagemin插件來壓縮jpg、png、gif等圖片。

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant'); //png圖片壓縮插件
gulp.task('default', function () {
    return  gulp.src('src/images/*')
                .pipe(imagemin({
                    progressive: true,
                    use: [pngquant()] //使用pngquant來壓縮png圖片
                }))
                .pipe(gulp.dest('dist'));
});

自動刷新

使用gulp-livereload插件，當代碼變化時，它可以幫我們自動刷新頁面。

var gulp = require('gulp'),
    less = require('gulp-less'),
    livereload = require('gulp-livereload');
gulp.task('less', function() {
    gulp.src('less/*.less')
        .pipe(less())
        .pipe(gulp.dest('css'))
        .pipe(livereload());
});
gulp.task('watch', function() {
  livereload.listen(); //要在這裏調用listen()方法
  gulp.watch('less/*.less', ['less']);
});