## Gulp構建前端自動化工作流


### Gulp構建前端自動化工作流之：常用插件介紹及使用


在對Gulp有了一個初步的了解之后，我們開始構建一個較為完整的Gulp開發環境。


本文主要分為6個段落：


* 1\. 構建項目目錄結構（Directory Structure Build）
* 2\. 插件介紹及使用方法（Tasks and dependencies）
* 3\. 擴展優化（Extend & Optimize Task）
* 4\. 其他插件介紹（Other plug-ins）
* 5\. 匹配規則（Match Files）
* 6\. 注意事項（Attention）


關于Gulp的入門介紹及安裝方法，可先去[《Gulp構建前端自動化工作流之：入門介紹及LiveReload的使用》](http://www.bluesdream.com/blog/gulp-frontend-automation-introduction-and-livereload.html "Gulp構建前端自動化工作流之：入門介紹及LiveReload的使用") 這篇文章查看。對其有個初步認識后，便于后文的理解。<!--more-->


### 1. 構建項目目錄結構（Directory Structure Build）


```js
+ my-gulp（項目文件夾）
? + node_modules Gulp組件目錄
? + dist 發布環境
? + css 編譯后的CSS文件
? ? ─ etc...
? + images 壓縮后的圖片文件
? ? ─ etc...
? + js 編譯后的JS文件
? ? ─ etc...
　　─ html 靜態文件
? + src 開發環境
? + sass SASS文件
? ? ─ etc...
? + images 圖片文件
? ? ─ etc...
? + js JS文件
? ? ─ etc...
? ─ html 靜態文件
? ─ gulpfile.js Gulp任務文件


注：
+ 表示目錄 ?─ 表示文件
```


### 2. 插件介紹及使用方法（Tasks and dependencies）


#### 2.1 HTML處理（HTML Task）


僅把開發環境中的HTML文件，移動至發布環境。


基礎配置：
```js
gulp.task('html', function() {
? return gulp.src('src/**/*.html') // 指明源文件路徑、并進行文件匹配
? ? .pipe('dist'); // 輸出路徑
});
```


執行命令：
`gulp html`


#### 2.2 樣式處理（CSS Task）


##### CSS預處理/Sass編譯 ([gulp-ruby-sass](https://www.npmjs.com/package/gulp-ruby-sass)) ：


相比較glup-sass而言，速度會稍許慢點，但功能更多并且穩定。


安裝SASS：
1. 像Gulp基于Node.js一樣，Sass基于Ruby環境，所以我們先去官網下載并安裝[Ruby](http://rubyinstaller.org/downloads)（在安裝的時候，請勾選`Add Ruby executables to your PATH`這個選項，添加環境變量，不然以后使用編譯軟件的時候會提示找不到ruby環境）。
2. 安裝完ruby之后，在開始菜單中，找到剛才我們安裝的ruby，打開`Start Command Prompt with Ruby`
3. 然后直接在命令行中輸入`gem install sass`按回車鍵確認，等待一段時間就會提示你sass安裝成功。


> 注：
> 由于近期墻的比較嚴重，外加（上海）電信限制了外網訪問速度。如果安裝失敗，請使用淘寶的Ruby鏡像。具體操作方法請參考[淘寶RubyGems鏡像安裝 sass](http://www.w3cplus.com/sassguide/install.html)。


安裝命令：
`npm install gulp-ruby-sass --save-dev`


基礎配置：
```js
var gulp = require('gulp'); // 基礎庫
var sass = require('gulp-ruby-sass'); // sass/scss編譯


gulp.task('sass', function () {
? ? ?return sass('src/css', { style: 'compressed' }) // 指明源文件路徑、并進行文件匹配（style: 'compressed' 表示輸出格式）
? ? ? ? ? .on('error', function (err) {
? ? ? ? ? ? ? ?console.error('Error!', err.message); // 顯示錯誤信息
? ? ? ? ? })
? ? ? ? ? .pipe(gulp.dest('dist/css')); // 輸出路徑
});
```


執行命令：
`gulp sass`


插件提供4種輸出格式：
nested：嵌套縮進的css代碼，它是默認值。
expanded：沒有縮進的、擴展的css代碼。
compact：簡潔格式的css代碼。
compressed：壓縮后的css代碼。


> 注：
> 使用前清看清 gulp-ruby-sass 寫法，不要直接拿 gulp-sass 的寫法來套用，兩者并不完全相同。


#### 2.3 腳本壓縮&重命名（Javascript Task）


##### JS文件壓縮([gulp-uglify](https://www.npmjs.com/package/gulp-uglify))：


使用uglify引擎壓縮JS文件。


安裝命令：
`npm install gulp-uglify --save-dev`


基礎配置：
```js
var gulp = require('gulp'); // 基礎庫
var uglify = require('gulp-uglify'); // js壓縮


gulp.task('script', function() {
? return gulp.src('src/js/*.js') // 指明源文件路徑、并進行文件匹配
? ? .pipe(uglify({ preserveComments:'some' })) // 使用uglify進行壓縮，并保留部分注釋
? ? .pipe(gulp.dest('dist/js')); // 輸出路徑
});
```


執行命令：
`gulp script`


#### 2.4 圖片處理（Image Task）


##### 圖片壓縮([gulp-imagemin](https://www.npmjs.com/package/gulp-imagemin)) + 深度壓縮([imagemin-pngquant](https://www.npmjs.com/package/imagemin-pngquant))：


壓縮PNG、JPEG、GIF和SVG圖像。
gulp-imagemin集成了[gifsicle](https://github.com/kevva/imagemin-gifsicle) 、[jpegtran](https://github.com/kevva/imagemin-jpegtran) 、[optipng](https://github.com/kevva/imagemin-optipng) 、[svgo](https://github.com/kevva/imagemin-svgo) 這4個插件。而imagemin-pngquant是imagemin插件的一個擴展插件，用于深度壓縮圖片。


安裝命令：
`npm install gulp-imagemin imagemin-pngquant --save-dev`


基礎配置：
```js
var gulp = require('gulp'); // 基礎庫
var imagemin = require('gulp-imagemin'), // 圖片壓縮
? pngquant = require('imagemin-pngquant'); // 深度壓縮


gulp.task('images', function(){
? return gulp.src('src/images/**/*.{png,jpg,gif,svg}') // 指明源文件路徑、并進行文件匹配
? ? .pipe(imagemin({
? ? ? progressive: true, // 無損壓縮JPG圖片
? ? ? svgoPlugins: [{removeViewBox: false}], // 不移除svg的viewbox屬性
? ? ? use: [pngquant()] // 使用pngquant插件進行深度壓縮
? ? }))
? ? .pipe(gulp.dest('dist/images')); // 輸出路徑
});
```


執行命令：
`gulp images`


> 注：
> 一般我們所使用的圖片壓縮方法，都會對圖像造成一定的損失，這個和壓縮比率有一定的關系。通常我們所說的無損壓縮，也只是控制在我們肉眼難以發現的范圍內。換句話來說，在你保存切圖的同時，其實已經對圖像造成了一定的損失，因為沒什么人會選擇100%最佳質量導出圖片。兩者是差不多的概念。




#### 2.5 自動刷新（LiveReload Task）


##### 網頁自動刷新（文件變動后即時刷新頁面）([gulp-livereload](https://www.npmjs.com/package/gulp-livereload)) + 靜態服務器：([gulp-webserver](https://www.npmjs.com/package/gulp-webserver))：


安裝命令：
`npm install gulp-livereload gulp-webserver --save-dev`


```js
var gulp = require('gulp'); // 基礎庫
var livereload = require('gulp-livereload'), // 網頁自動刷新（文件變動后即時刷新頁面）
? webserver = require('gulp-webserver'); // 本地服務器


// 注冊任務
gulp.task('webserver', function() {
? gulp.src( '.' ) // 服務器目錄（.代表根目錄）
? .pipe(webserver({ // 運行gulp-webserver
? ? livereload: true, // 啟用LiveReload
? ? open: true // 服務器啟動時自動打開網頁
? }));
});


// 監聽任務
gulp.task('watch',function(){
? // 監聽 html
? gulp.watch('src/**/*.html', ['html'])
? // 監聽 scss
? gulp.watch('src/scss/*.scss', ['css']);
? // 監聽 images
? gulp.watch('src/images/**/*.{png,jpg,gif,svg}', ['images']);
? // 監聽 js
? gulp.watch('src/js/*.js', ['script']);
});
?
// 默認任務
gulp.task('default',['webserver','watch']);
```


執行命令：
`gulp`


### 3. 擴展優化（Extend & Optimize Task）


至此，`一套簡單的前端自動化工作流/Gulp工作流便已經完成`。現在，我們開始優化并擴展這些插件，使我們的工作流更為"智能"。


##### 3.1 文件重命名([gulp-rename](https://www.npmjs.com/package/gulp-rename))：
像jQuery一樣，通常為了表示該文件是壓縮版，會在文件名后加上 .min 后綴。


安裝命令：
`npm install gulp-rename --save-dev`


基礎配置：
```js
var gulp = require('gulp'); // 基礎庫
var uglify = require('gulp-uglify'), // js壓縮
? rename = require('gulp-rename'); // 文件重命名


gulp.task('script', function() {
? return gulp.src('src/js/*.js') // 指明源文件路徑、并進行文件匹配
? ? .pipe(rename({ suffix: '.min' })) // 重命名
? ? .pipe(uglify({ preserveComments:'some' })) // 使用uglify進行壓縮，并保留部分注釋
? ? .pipe(gulp.dest('dist/js')); // 輸出路徑
});
```


執行命令：
`gulp script`


##### 3.2 來源地圖([gulp-sourcemaps](https://www.npmjs.com/package/gulp-sourcemaps))：
這是個非常有用的插件，我們在壓縮、合并等操作之后，調試時所看到的內容，都是編譯后的代碼。這樣就導致一個問題，調試過程中無法和源碼（編譯時的代碼）位置相對應，讓調試變的十分困難。
例如：一個jQuery，源碼接近1萬行。但壓縮后只有短短的3~4行，并且變量名稱也已發生改變。此時一旦報錯，你很難從錯誤信息中直接找到對應代碼的原始位置。同樣，CSS也會遇到類似問題。
而sourcemaps作用，便是成一個`.map`文件，里面儲存著對應的源碼位置。并內嵌在你轉換后的文件底部`/*# sourceMappingURL=maps/filename.css.map */`。這樣在我們調試時，就會直接顯示（映射）源碼，而不時編譯后的代碼。


安裝命令：
`npm install gulp-sourcemaps --save-dev`


基礎配置：
```js
var gulp = require('gulp'); // 基礎庫
var uglify = require('gulp-uglify'), // js壓縮
? rename = require('gulp-rename'), // 文件重命名
? sourcemaps = require('gulp-sourcemaps'); // 來源地圖


gulp.task('script', function() {
? return gulp.src(['src/js/*.js','!*.min.js']) // 指明源文件路徑、并進行文件匹配，排除 .min.js 后綴的文件
? ? .pipe(sourcemaps.init()) // 執行sourcemaps
? ? .pipe(rename({ suffix: '.min' })) // 重命名
? ? .pipe(uglify({ preserveComments:'some' })) // 使用uglify進行壓縮，并保留部分注釋
? ? .pipe(sourcemaps.write('maps')) // 地圖輸出路徑（存放位置）
? ? .pipe(gulp.dest('dist/js')); // 輸出路徑
});
```


執行命令：
`gulp script`


##### 3.3 只操作有過修改的文件([gulp-changed](https://www.npmjs.com/package/gulp-changed))：
比如我們有20個文件，當你修改其中1個文件時，由于任務的局限性，也會把其余19匹配的無辜的同類給一并進行處理，這樣就大大降低了效率。而 `gulp-changed` 插件，會首先把文件進行比對，如果文件沒有改動，則跳過后續任務。


安裝命令：
`npm install gulp-changed --save-dev`


基礎配置：
```js
var gulp = require('gulp'); // 基礎庫
var imagemin = require('gulp-imagemin'), // 圖片壓縮
? pngquant = require('imagemin-pngquant'), // 深度壓縮
? changed = require('gulp-changed'); // 只操作有過修改的文件


gulp.task('images', function(){
? return gulp.src('src/images/**/*.{png,jpg,gif,svg}') // 指明源文件路徑、并進行文件匹配
? ? .pipe(changed('dist/images')) // 對比文件是否有過改動（此處填寫的路徑和輸出路徑保持一致）
? ? .pipe(imagemin({
? ? ? progressive: true, // 無損壓縮JPG圖片
? ? ? svgoPlugins: [{removeViewBox: false}], // 不移除svg的viewbox屬性
? ? ? use: [pngquant()] // 使用pngquant插件進行深度壓縮
? ? }))
? ? .pipe(gulp.dest('dist/images')); // 輸出路徑
});
```


執行命令：
`gulp images`


此時我們再去 `dist/images` 文件夾，查看每個圖片的最后修改日期，你就會發現只針對你剛才修改過的圖片（文件）行了處理，而那些之前已經處理過的圖片則沒有再進行操作。


> 注：
> 無論是 gulp-changed 還是下文中提到的 gulp-cache ，對 sass 文件無效，始終會對所有匹配文件進行操作。


##### 3.4 文件合并([gulp-concat](https://www.npmjs.com/package/gulp-concat))：
比如我們有多個JS庫，jquery.min.js、bootstrap.min.js、angular.min.js。此時可以通過合并，減少網絡請求。


安裝命令：
`npm install gulp-concat --save-dev`


基礎配置：
```js
var gulp = require('gulp'); // 基礎庫
var concat = require("gulp-concat"); // 文件合并
?
gulp.task('concat', function () {
? ? gulp.src('js/*.min.js') ?// 要合并的文件
? ? .pipe(concat('libs.js')) ?// 合并成libs.js
? ? .pipe(gulp.dest('dist/js'));
});
```


執行命令：
`gulp concat`


##### 3.5 文件清理([gulp-clean](https://www.npmjs.com/package/gulp-clean))：
簡單的說，就是一鍵刪除（清理）文件。就拿為了調試所生成的 .map 文件為例，在正式發布時并不需要，此時我們就能通過 clean任務進行清理。


安裝命令：
`npm install gulp-clean --save-dev`


基礎配置：
```js
var gulp = require('gulp'); // 基礎庫
var clean = require('gulp-clean'); // 文件清理


gulp.task('clean', function() {
? return gulp.src(['dist/css/maps','dist/js/maps'], {read: false})
? ? .pipe(clean());
});
```


執行命令：
`gulp clean`


### 4. 其他插件介紹（Other plug-ins）


這部分插件作為擴展閱讀，只做簡單介紹。每個插件都有每個插件的特性，根據你的喜好和實際操作環境而定，蘿卜青菜各有所愛。用的人最多的，不代表就是適合你的。總之，有時間有精力的，可以多試試，多玩玩，多配配，這里也只是冰山一角。


#### 4.1 CSS類


##### 1. CSS壓縮 ([gulp-minify-css](https://www.npmjs.com/package/gulp-minify-css))


安裝命令：
`npm install gulp-minify-css --save-dev`


基礎配置：
```js
var gulp = require('gulp'); // 基礎庫
var minifyCss = require('gulp-minify-css'); // CSS壓縮


gulp.task('minify-css', function() {
? return gulp.src('css/*.css')
? ? .pipe(gulp.dest('dist'));
});
```


執行命令：
`gulp minify-css`


##### 2. CSS預處理/Less編譯 ([gulp-less](https://www.npmjs.com/package/gulp-less))


安裝命令：
`npm install gulp-autoprefixer --save-dev`


基礎配置：
```js
var gulp = require('gulp'); // 基礎庫
var less = require('gulp-less'); // LESS編譯


gulp.task('less', function () {
? ? gulp.src('src/less/*.less')
? ? ? ? .pipe(less())
? ? ? ? .pipe(gulp.dest('src/css'));
});
```


執行命令：
`gulp less`


##### 3. 自動添加CSS3瀏覽器前綴([gulp-autoprefixer](https://www.npmjs.com/package/gulp-autoprefixer)):


[-prefix-free](http://leaverou.github.io/prefixfree/) 大家肯定都比較熟，會自動為CSS添加上瀏覽器的前綴，幫你擺脫前綴痛苦。而 `gulp-autoprefixer` 插件同樣如此。


安裝命令：
`npm install gulp-autoprefixer --save-dev`


基礎配置：
```js
var gulp = require('gulp'); // 基礎庫
var autoprefixer = require('gulp-autoprefixer'); // 自動添加CSS3瀏覽器前綴


gulp.task('prefix', function () {
? ? gulp.src('src/css/*.less')
? ? ? ? .pipe(less())
? ? ? ? .pipe(gulp.dest('src/css'));
});


var gulp = require('gulp'); // 基礎庫
var sass = require('gulp-ruby-sass'), // sass/scss編譯
? autoprefixer = require('gulp-autoprefixer'); // 自動添加CSS3瀏覽器前綴


gulp.task('sass', function () {
? return sass('src/css', { style: 'compressed' }) // 指明源文件路徑、并進行文件匹配
? ? .on('error', function (err) {
? ? ? console.error('Error!', err.message); // 顯示錯誤信息
? ? })
? ? .pipe(autoprefixer({
? ? ? browsers: ['last 2 versions'], // 主流瀏覽器的最新兩個版本
? ? ? cascade: false // 是否美化屬性值
? ? }))
? ? .pipe(gulp.dest('dist/css')); // 輸出路徑
});
```


執行命令：
`gulp sass`


#### 4.2 圖像類


##### 1. 使用TinyPN API壓縮圖片([gulp-tinypng](https://www.npmjs.com/package/gulp-tinypng))：
使用TinyPNG官方API進行圖片壓縮。我個人比較喜歡這個，因為之前一直有在使用。但由于TinyPNG服務器在國外，有時執行起來會很慢，除非你有VPN，所以在這只做簡單介紹。
經過我的測試，gulp-tinypng壓縮后的圖片大小，相當于使用imagemin-pngquant深度壓縮后的大小。使用時需先注冊TinyPNG賬戶，獲你的API KEY。免費版每個月可以壓縮500張圖片，對于一般項目而言已經足夠。


安裝命令：
`npm install gulp-tinypng --save-dev`


基礎配置：
```js
var gulp = require('gulp'); // 基礎庫
var tinypng = require('gulp-tinypng'); // 使用TinyPN API壓縮圖片


gulp.task('tinypng', function(){
? ? return gulp.src('src/images/**/*') // 源地址
? ? ?.pipe(tinypng('填寫TinyPN API KEY'))
? ? .pipe(gulp.dest('dist/images')); // 輸出路徑
});
```


執行命令：
`gulp tinypng`


#### 4.3 其他


##### 1. 緩存代理([gulp-cache](https://www.npmjs.com/package/gulp-cache))：
緩存操作過的文件，當文件修改時，只編譯當前修改的文件。其余文件直接從緩存中調取，提高效率。
缺點：因為是緩存，所以如果文件被刪除，但沒及時清理緩存文件時，就會導致被刪除的文件又從緩存中讀取了出來，所謂成也蕭何敗也蕭何。


安裝命令：
`npm install gulp-cache --save-dev`


基礎配置：
```js
var gulp = require('gulp'); // 基礎庫
var imagemin = require('gulp-imagemin'), // 圖片壓縮
? pngquant = require('imagemin-pngquant'), // 深度壓縮
? pngquant = require('imagemin-cache'), // 緩存代理
? clean = require('imagemin-clean'); // 文件清理


// imagemin 圖片壓縮（利用cache）
gulp.task('images', function(){
? return gulp.src('src/images/**/*.{png,jpg,gif,svg}') // 指明源文件路徑、并進行文件匹配
? ? .pipe(cache(imagemin({
? ? ? progressive: true, // 無損壓縮JPG圖片
? ? ? svgoPlugins: [{removeViewBox: false}], // 不要移除svg的viewbox屬性
? ? ? use: [pngquant()] // 使用pngquant插件進行深度壓縮
? ? })))
? ? .pipe(gulp.dest('dist/images')); // 輸出路徑
});
// 清理緩存文件
gulp.task('clean', function (done) {
? return cache.clearAll(done);
});
```


### 5. 匹配規則（Match Files）


Gulp使用 [node-glob](https://github.com/isaacs/node-glob) 模塊，借助 [minimatch](https://github.com/isaacs/minimatch) 庫，將glob表達式(glob expressions)轉換成JavaScript正則表達式(JavaScript RegExp) ，從而實現文件匹配功能。我們所看到的`**`和`*`都是其所提供的語法： ?
`*` 匹配文件路徑中的0個或多個字符，但不會匹配路徑分隔符，除非路徑分隔符出現在末尾。 ?
`**` 匹配路徑中的0個或多個目錄及其子目錄，需要單獨出現，即它左右不能有其他東西了。如果出現在末尾，也能匹配文件。 ?
`?` 匹配文件路徑中的一個字符(不會匹配路徑分隔符)。 ?
`[...]` 匹配方括號中出現的字符中的任意一個，當方括號中第一個字符為`^`或`!`時，則表示不匹配方括號中出現的其他字符中的任意一個。 ?
`!(pattern|pattern|pattern)` 匹配任何與括號中給定的任一參數一致的都不匹配的。 ?
`?(pattern|pattern|pattern)` 匹配括號中給定的任一參數0次或1次。 ?
`+(pattern|pattern|pattern)` 匹配括號中給定的任一參數至少1次。 ?
`*(a|b|c)` 匹配括號中給定的任一參數0次或多次。 ?
`@(pattern|pat*|pat?erN)` 匹配括號中給定的任一參數1次。


用實例來加深理解： ?
`*` 能匹配 `a.js` , `x.y` , `abc , abc/`，但不能匹配 a/b.js ?
`*.*` 能匹配 `a.js` , `style.css` , `a.b` , `x.y` ?
`*/*/*.js` 能匹配 `a/b/c.js` , `x/y/z.js`，不能匹配 `a/b.js` , `a/b/c/d.js` ?
`**` 能匹配 `abc` , `a/b.js` , `a/b/c.js` , `x/y/z` , `x/y/z/a.b`，能用來匹配所有的目錄和文件 ?
`**/*.js` 能匹配 `foo.js` , `a/foo.js` , `a/b/foo.js` , `a/b/c/foo.js` ?
`a/**/z` 能匹配 `a/z` , `a/b/z` , `a/b/c/z` , `a/d/g/h/j/k/z` ?
`a/**b/z` 能匹配 `a/b/z , a/sb/z`，但不能匹配 `a/x/sb/z`，因為只有單`**`單獨出現才能匹配多級目錄 ?
`?.js` 能匹配 `a.js` , `b.js` , `c.js` ?
`a??` 能匹配 `a.b` , `abc`，但不能匹配 `ab/`，因為它不會匹配路徑分隔符 ?
`[xyz].js` 只能匹配 `x.js` , `y.js` , `z.js`，不會匹配 `xy.js` , `xyz.js` 等，整個中括號只代表一個字符 ?
`[^xyz].js` 能匹配 `a.js` , `b.js` , `c.js`等，不能匹配 `x.js` , `y.js` , `z.js` ?


當有多種匹配模式時可以使用數組：
```js
// 使用數組的方式來匹配多種文件
gulp.src(['js/*.min.js','css/*.min.css'])
```


使用數組的方式還有一個好處就是可以很方便的使用排除模式，在數組中的單個匹配模式前加上`!`即是排除模式，它會在匹配的結果中排除這個匹配，要注意一點的是不能在數組中的第一個元素中使用排除模式：
```js
// 使用數組的方式來匹配多種文件
gulp.src(['*.js','!b*.js']) // 匹配所有js文件，但排除掉以b開頭的js文件
gulp.src(['!b*.js',*.js]) // 不會排除任何文件，因為排除模式不能出現在數組的第一個元素中
```


此外，還可以使用展開模式。展開模式以花括號作為定界符，根據它里面的內容，會展開為多個模式，最后匹配的結果為所有展開的模式相加起來得到的結果。展開的例子如下： ?
`a{b,c}d` 會展開為 `abd,acd` ?
`a{b,}c` 會展開為 `abc,ac` ?
`a{0..3}d` 會展開為 `a0d`,`a1d`,`a2d`,`a3d` ?
`a{b,c{d,e}f}g` 會展開為 `abg`,`acdfg`,`acefg` ?
`a{b,c}d{e,f}g` 會展開為 `abdeg`,`acdeg`,`abdeg`,`abdfg` ?


### 6. 注意事項（Attention）


* watch 的時候路徑不要用 './path'，直接使用 '/path' 即可，不然會導致新增文件無法被 watch。
* gulp 對于 one after one 的任務鏈，需要加 return，比如 gulp clean


參考資料：
[An introduction to Gulp](http://www.codeproject.com/Articles/865943/An-introduction-to-Gulp)
[gulp API 介紹](http://www.cnblogs.com/2050/p/4198792.html#part3)


擴展資料：
[Gulp API docs](https://github.com/gulpjs/gulp/blob/master/docs/API.md)
[gulp-cheatsheet](https://github.com/osscafe/gulp-cheatsheet)


原文地址：
[Gulp構建前端自動化工作流之：常用插件介紹及使用](http://www.bluesdream.com/blog/gulp-frontend-automation-plugins-instructions.html)

總結

以上是生活随笔為你收集整理的Gulp构建前端自动化工作流的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。