裝好了gulp，接下來就是大戰身手的時候了?
首先，當然是先裝幾個必須用到且簡單的插件，其他以後在探索~
一、常用插件：
- 文檔操作
- gulp-concat：合併文檔
- gulp-rename：重命名文檔
- 壓縮
- gulp-uglify：壓縮js文件
- gulp-clean-css：壓縮css文件
- gulp-htmlmin：壓縮html文件
- gulp-imagemin：壓縮圖片
- 其他
- gulp-jshint：檢測js代碼 坑1
- gulp-sass：編譯sass
二、安裝插件：
項目文件目錄下執行：
cnpm install --save-dev gulp-uglify
或 npm install --save-dev gulp-uglify
即可完成 gulp-uglify 的安裝，其他插件的安裝只需要替換以上插件名即可。
//使用cnpm原因及方法詳見
關於前端自動化工具Gulp的使用(一)——初次接觸與安裝.
坑1：gulp-jshint：檢測js代碼的安裝必須同步安裝 jshint，單裝 gulp-jshint 會出現以下錯誤
Error: Cannot find module 'jshint/src/cli'
爲什麼呢，簡單來說就是 gulp-jshint 依賴於 jshint ?
以上插件都裝好後，package.json文件就會是一下這個樣子：
安裝完後還需將插件導入 gulpfile.js 才能使用
三、（可略過）檢測插件
打開 gulpfile.js 文件，將已裝好的插件導入，爲防止一些莫名其妙的bug，採用一個個的導入來測試插件是否正確安裝的方法，不然出現問題會很頭大?
方法如下，還是拿 gulp-jshint 舉例，測試代碼如下：
關於 gulp.src 的文件匹配問題，可以自行谷歌
在命令行裏運行 gulp jshint 測試：
js會產生一些報錯，不過只要通過檢測，基本是沒問題的。
其他的插件檢測與方法可以參考： https://gulpjs.com/plugins/.
四、好了，接下來就是見證奇蹟的時候了?（看到這個表情相信你也懂了）
全部測試完成後，說明這些插件都裝好了，這時 gulpfile.js 文件開頭就是這樣滴：
注：還是 gulp-jshint 的問題，只需要導入 gulp-jshint ，無需額外導入 jshint ，原因前文已說明?
編寫好各方法，此時 gulpfile.js 應是如下樣式，具體看使用哪些插件：
var gulp = require('gulp'),
sass = require('gulp-sass'),
concat = require('gulp-concat'),
jshint = require('gulp-jshint'),
uglify = require("gulp-uglify"),
rename = require("gulp-rename"),
imagemin = require('gulp-imagemin'),
minifyHtml = require('gulp-htmlmin'),
minifyCss = require("gulp-clean-css");
//js代碼檢查
gulp.task('jshint', function() {
return gulp.src('js/*.js')
.pipe(jshint())
.pipe(jshint.reporter()); //輸出檢查結果
});
//壓縮js
gulp.task('minify-js', function () {
return gulp.src('js/*.js') // 要壓縮的js文件
.pipe(uglify())
.pipe(gulp.dest('dist/js')); //壓縮後的路徑
});
//合併壓縮全部的js，並重命名
gulp.task('concat-js', function() {
return gulp.src('js/*.js')
.pipe(concat('all.js'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});
//壓縮css
gulp.task('minify-css', function () {
return gulp.src('css/*.css')
.pipe(minifyCss())
.pipe(gulp.dest('dist/css'));
});
//合併壓縮的css，並重命名
gulp.task('concat-css', function() {
return gulp.src('css/*.css')
.pipe(concat('all.css'))
.pipe(rename('all.min.css'))
.pipe(minifyCss())
.pipe(gulp.dest('dist/css'));
})
//壓縮html
gulp.task('minify-html', function() {
return gulp.src('html/*.html')
.pipe(minifyHtml())
.pipe(gulp.dest('dist/html'))
});
//壓縮圖片，壓縮後的文件放入dest/images
gulp.task('image',function(){
return gulp.src('images/*.+(jpg|png|gif|svg)')
.pipe(imagemin())//壓縮
.pipe(gulp.dest('dist/images'));//輸出
});
//編譯sass
gulp.task('sass', function() {
return gulp.src('sass/*.sass')
.pipe(sass())
.pipe(gulp.dest('dist/css'))
});
//默認命令，在cmd中輸入gulp後，執行的就是這個命令
gulp.task('default', function() {
gulp.run('jshint','minify-js','concat-js','minify-css','concat-css','minify-html','image','sass')
});
命令行輸入gulp，執行
？？？喵喵喵
好吧，修改默認任務：
//默認命令，在cmd中輸入gulp後，執行的就是這個命令
gulp.task('default', ['jshint','minify-js','concat-js','minify-css','concat-css','minify-html','image','sass']);
命令行輸入gulp，執行
喵喵喵？？？
好吧，再來
//默認命令，在cmd中輸入gulp後，執行的就是這個命令
gulp.task('default', function() {
gulpstart('jshint','minify-js','concat-js','minify-css','concat-css','minify-html','image','sass')
});
什麼鬼哦?
看說明，是默認任務出了問題，首先 function 必須說明，添加了說明 然而 run 、start 竟然不是 function ？？喵喵，那網上的大神們的文件是怎麼編譯通過的哦，用查克拉麼?
好吧，繼續Gogol
好吧，連中文網都是這樣
大坑f**k
繼續狗狗狗
。。。
。。。
。。。
都9102年了，gulp都4.0了，所以
這麼說 gulp.task(‘default’, [‘jshint’…]); 是妥妥的GG了，看來找資料也要找近一點的才行，不然掉坑了還沾沾自喜?
根據以下資料
Gulp 官網
Gulp 4.0 前瞻
完整的Ish指南升級到Gulp 4
Gulp 4
使用新添加的 gulp.series() 和 gulp.parallel() 方法
具體在 gulpfile.js 文件開頭導入
const { series } = require('gulp');
接着就可以使用series方法了，parallel方法同理
然後修改默認任務
//默認命令，在cmd中輸入gulp後，執行的就是這個命令
exports.default = series('jshint','minify-js','concat-js','minify-css','concat-css','minify-html','image','sass');
結果
成功，我的媽啊，全是坑?，以上文檔15、16年的啊，現在都9102年了，gulp都4.0了，好像 gulp.watch 都不再使用了(⊙o⊙)？結果 gulp.js - 基於流的自動化構建工具 竟然還沒更新?不過還是要感謝那些爲漢化做出貢獻的榜樣們?
最後，果然學習新知識最好還是看官網 雖然全是英文，雖然一點都不人性化，但卻是能避免很多坑啊?（小聲：幸虧我有翻譯君?）
參考鏈接：
https://www.cnblogs.com/Tom-yi/p/8036730.html
https://gulpjs.com/