装好了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/