gulp不僅僅是打包，可以優(yōu)化前端的流程,(webpack打包優(yōu)于gulp)

gulpfile.js

定義gulp所有的任務(wù)

安裝需要的插件

npm install gulp-rev gulp-rev-replace gulp-useref gulp-filter gulp-uglify gulp-csso --save-dev

• gulp-rev
• gulp-rev-replace

• gulp-useref
  通過注釋的方式告訴gulp合并文件

  
  
  gulp-useref 合并文件
• gulp-filter
• gulp-uglify
• gulp-csso

簡單的栗子

gulpfile.js文件

/**
 *首先加載要依賴的加載項
 */
var gulp = require('gulp');

// 給每個文件添加版本號(在文件后面加上哈希碼，當(dāng)文件改變時更改哈希碼，內(nèi)容一樣的文件哈希碼一樣(即使修改時間不一樣))
var rev = require('gulp-rev');

// 將文件里面的引用改成新的
var revReplace = require('gulp-rev-replace');

// 通過注釋的方式告訴gulp合并文件 地址：https://www.npmjs.com/package/gulp-useref
var useref = require('gulp-useref');

// 過濾器 （篩選、restore恢復(fù)）
var filter = require('gulp-filter');

// 壓縮js文件
var uglify = require('gulp-uglify');
// 壓縮css文件
var csso = require('gulp-csso');
/* end */

// 定義一個任務(wù)
gulp.task('default', function () {
    var jsFilter = filter('**/*.js', {restore: true});
    var cssFilter = filter('**/*.css', {restore: true});
    // 排除首頁，保證首頁名字不變
    var indexHtmlFilter = filter(['**/*', '!**/index.html'], {restore: true});

    // 每個pipe處理就像是一個過濾器，對這個文件流進行處理
    return gulp.src('src/index.html')
        // 分析帶有useref注釋的語句，將包括的js、css文件放進文件流
        .pipe(useref())
        // 將js文件篩選出來
        .pipe(jsFilter)
        // 將js文件進行壓縮
        .pipe(uglify())
        // 通過restore將js文件重新扔回文件流里面
        .pipe(jsFilter.restore)

        // css文件處理
        .pipe(cssFilter)
        .pipe(csso())
        .pipe(cssFilter.restore)

        // 給文件添加版本號
        .pipe(indexHtmlFilter)
        .pipe(rev())
        .pipe(indexHtmlFilter.restore)
        // 更新文件里的引用
        .pipe(revReplace())

        // dest表示已經(jīng)結(jié)束，將文件流扔入到'dist目錄下'
        .pipe(gulp.dest('dist'));
});

注：

  *
  */```

```/*! 壓縮時不會被省略掉
  *
  */```

### 其他插件
1. gulp-watch 
 監(jiān)聽文件的改變，自動執(zhí)行任務(wù)，當(dāng)js文件改變時自動打包
2. gulp-postcss
 與autoprefixer插件相結(jié)合，自動給css屬性添加前綴
3. gulp-concat
 可以將很多文件合并成一個文件
4. gulp-responsive
 可以生成一系列的響應(yīng)式圖片