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');
// 給每個文件添加版本號(在文件后面加上哈希碼抚官，當文件改變時更改哈希碼扬跋，內(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ù)，當js文件改變時自動打包
2. gulp-postcss
與autoprefixer插件相結(jié)合余指，自動給css屬性添加前綴
3. gulp-concat
可以將很多文件合并成一個文件
4. gulp-responsive
可以生成一系列的響應(yīng)式圖片