gulp 是基於node 的一個構建工具 , 所謂構建工具是指通過簡單配置就可以幫我們實現合併、壓縮、校驗、預處理等一系列任務的軟體工具。常見的構建工具包括：Grunt、Gulp、Webpack 以及百度的F.I.S

下面我們來說下gulp ， gulp 提供外掛的機制 ，不會產生臃腫 ， 如果有需要再裝上相應的外掛就可以了。比如這個autoprefixer包，用於css自動新增字首，其實，gulp不幹什麼事情，專門指揮它的外掛幹活。官方文件

安裝

• 全域性安裝
  
  • $ npm install -g gulp

• 本地安裝

  • $ npm install gulp –save-dev
  • 本地安裝是為了把gulp作為專案的依賴

• 建立gulpfile.js檔案 ，定義一個任務，簡單的示例：

  // 檔案開頭，把gulp模組引入進來 , 以後在文章中的示例就不重複獲取了
  var gulp = require('gulp');
   gulp.task('default,function(){
       // 任務程式碼
   });
  

gulp 中常用到的外掛和使用方式

• 自動新增字首 autoprefixer

  • 先安裝 gulp-autoprefixer 包 ：
    $ npm install gulp-autoprefixer –save-dev

  • 開始使用

    // 引入模組 autoprefixer 
     
    
    var autoprefixer = require('gulp-autoprefixer');
    // 建立一個名稱為css的任務
    gulp.task('css',function(){
        /* 獲取需要構建的資源 如果有多個src需要傳陣列的形式，下面會有示例*/
        gulp.src('./css/*.css')
                /*通過管道的方式把資源以流的形式傳遞給autoprefixer來處理*/
                .pipe(autoprefixer())
                /* 再把處理結果通過管道傳遞給了gulp.dest() 方法，生成目標檔案*/
                .pipe(gulp.dest('./dist'
     
    ));
    })
    

  • 然後在bash或命令視窗中執行
    $ gulp css

  • 這裡總結下幾個函式的意思
    

    gulp.task() 用於構建任務，去配置我們的具體任務
    
    gulp.src()用於獲取需要構建資源的路徑
    傳遞的引數必須是個路徑，常見的配置項 {base:'./'} 
    
    gulp.dest() 放置構建好的資源路徑，傳遞引數也是一個路徑
    
    pipe() 是node中的管道，在這裡是將上一步處理的結果傳給下一步
    

• 合併js外掛 gulp-concat

  • 安裝外掛： $ npm install gulp-concat –save-dev

  • 使用外掛：

    // 獲取模組
    var concat = require('gulp-concat');
    // 建立任務
    gulp.task('js',function(){
    /*將當前js資料夾下的所有js檔案獲取到*/
    gulp.src('./js/*.js')
            /*合併成app.js*/
            .pipe(concat('app.js'))
            /*輸出到dist資料夾下*/
            .pipe(gulp.dest('./dist'))
    })

  • 執行命令
    $ gulp js

• 圖片壓縮外掛 gulp-imagemin

  • 獲取模組
    $ npm install gulp-imagemin –save-dev

  • 使用模組

    var imagemin = require('gulp-imagemin');
    gulp.task('image',function(){
    gulp.src('./image/*')
            .pipe(imagemin())
            .pipe(gulp.dest('./dist'));
    })

  • 執行任務
    $ gulp image

• 壓縮html外掛 gulp-htmlmin

  • 安裝模組
    $ npm install gulp-htmlmin

  • 使用模組

     var htmlmin = require('gulp-htmlmin');
     gulp.task('html',function(){
        gulp.src('./*.html',{
                         "removeComments":true,
                         "collapseWhitespace":true,
                         "minifyJS":true
                })
            .pipe(htmlmin())
            .pipe(gulp.dest('./dist'));
     });
    

  • 執行任務
    $ gulp html

• 把檔名修改成hash值模組 gulp-rev

  • 安裝模組
    $ npm install gulp-rev –save-dev

  • 使用模組

    var rev = require('gulp-rev');
    gulp.task('rev',function(){
    /* 下面 ** 的方式叫做global語法，表示目錄下面的所有 */
    gulp.src(['./dist/**/*.css','./dist/**/*.js','./dist/**/*'],{base:'./'})
            /* 轉換成新的檔名 */
            .pipe(rev())
            .pipe(gulp.dest('./dist'))
            /*收集原檔名與新檔名的關係*/
            .pipe(rev.manifest())
            // 將檔案以json的形式存在當前專案下的 ./rev 目錄下
            .pipe(gulp.dest('./rev'));
    });

  • 執行任務
    $ gulp rev

• 替換檔案路徑外掛 gulp-rev-collector

  • 安裝模組
    $ npm install gulp-rev-collector –save-dev

  • 使用模組

    var revCollector = require('gulp-rev-collector');
    /* 使用這個模組，需要依賴rev任務，所以需要注入rev任務，如果不注入需要先執行rev任務 */
    gulp.task('revCollector',['rev'],function(){
    // 根據生成的json檔案，去替換html裡的路徑
    gulp.src(['./rev/*.json','./dist/*.html'])
           .pipe(revCollector())
           .pipe(gulp.dest('./dest'));
    })

  • 執行任務
    $ gulp revCollector

優化gulp 命令

從上面看到，我們每每去執行一條任務，就要執行一條命令，這樣顯然是不合理的，所以我們需要進行優化。優化的方式就是任務注入以及 return 的使用
下面是優化的程式碼：

var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var concat = require('gulp-concat');
var imagemin = require('gulp-imagemin');
var htmlmin = require('gulp-htmlmin');
var rev = require('gulp-rev');
var revCollector = require('gulp-rev-collector');
var uglify = require('gulp-uglify');

// 處理CSS
gulp.task('css', function () {
    return gulp.src('./css/*.css', {base: './'})
               .pipe(autoprefixer())
               .pipe(gulp.dest('./dist'));
});

// 此處就不做CSS壓縮的演示了，原理相同。

// 壓縮js
gulp.task('js', function() {
    return gulp.src('./js/*.js', {base: './'})
               .pipe(uglify())
               .pipe(gulp.dest('./dist'));
});

// 壓縮圖片
gulp.task('image', function () {
    return gulp.src('./images/*', {base: './'})
               .pipe(imagemin())
               .pipe(gulp.dest('./dist'));
});

// 壓縮html
gulp.task('html', function () {
    return gulp.src('./*.html')
               .pipe(htmlmin({
                   removeComments: true,
                   collapseWhitespace: true,
                   minifyJS: true
               }))
               .pipe(gulp.dest('./dist'));
});

// 生成hash檔名
gulp.task('rev',['css', 'js', 'image', 'html'], function () {
    // 其中加!字首的是表示過濾該檔案
    return gulp.src(['./dist/**/*', '!**/*.html'], {base: './dist'})
               .pipe(rev())
               .pipe(gulp.dest('./dist'))
               .pipe(rev.manifest())
               .pipe(gulp.dest('./rev'));
});

// 替換檔案路徑
gulp.task('revCollector',['rev'], function () {
    // 根據生成的json檔案，去替換html裡的路徑
    return gulp.src(['./rev/*.json', './dist/*.html'])
               .pipe(revCollector())
               .pipe(gulp.dest('./dist'));
});
// gulp中預設以default為任務名稱
gulp.task('default', ['revCollector']);

執行任務 , 在命令列中，我們只需要執行 下面的命令
$ gulp
或者是
$ gulp default
就可以對 專案進行構建了。

上面只是簡單的演示了一下， 還有很多問題存在，比如 合併js的時候，使用 gulp-concat 生成的新js裡面，原來html裡面並沒有引用，還需要使用gulp-inject 來將生成的js注入到html，還有很多東西要學習。

常用外掛

Gulp-uglify
Gulp-autoprefixer
Gulp-htmlmin
Gulp-less
Gulp-livereload
Gulp-minify-css
Gulp-imagemin
Gulp-concat
gulp-rev
gulp-rev-collector
gulp-clean
gulp-inject