最近做了一个比较 mini 的项目，使用的是原生 JS 和 jQuery，想着平时都是用 webpck 来打包，这次这个简单点，不如试试别的，折腾一下。于是就选了 gulp，以前没用过，对 gulp 还是一知半解，所以折腾了几个小时才搭建好，这里也记录下。
安装
在安装之前，需要有 node 和 npm 的环境，没安装的要记得先安装，参考 node 官网或其他很多很多很多的文章，都有详细的说明。
全局安装命令行工具，接着 cd 进入到你的项目根目录
npm i gulp --save-dev
// 或者使用 yarn
yarn add gulp --dev
--save-dev
的意思是把它写入 package.json 的 devDependencies 下，也就是开发环境依赖。
到这，gulp 就安装好了。目前最新的是 gulp4 ，我在网上搜的一些写法都是 gulp3 的，所以报错比较多。对于 gulp 来说，主要使用一系列异步执行的 task 任务来完成相关操作。用得最多就是
gulp.task
定义一个任务，然后在回调函数里执行我们想做的操作。
插件
gulp.task()
只是创建一个执行任务，真正项目构建过程中，我们需要用到许多的插件来辅助完成一系列操作，比如代码压缩，文件合并等等。这里介绍下常用的插件：
-
gulp-jshint
代码检查，用了这个后有点后悔，配置太麻烦了，建议还是用 eslint 好了
-
gulp-sass
由于用 sass 书写，所以这是编译 sass 的插件，对于 less 或其他来说，也可以去 npm 上搜索相关插件
-
-
gulp-rev
这个很重要，给 css 和 js 文件添加 hash ，防止缓存。一大堆缓存导致你改了东西都没反应，简直让人抓狂
-
gulp-rev-collector
配合 gulp-rev 用的，自动给 html 文件引入加上 hash 后的 css 或 js 文件
-
gulp-htmlmin
这个是用来压缩 html 文件的，所有文件能压缩的就压缩，节省空间
-
gulp-concat
这个是用来合并文件的，比如将所有 js 都合并为一个大的 js ，再引入
-
gulp-uglify
这个是用来压缩 js 文件的
-
gulp-rename
这个是用来给文件重命名的，比如前面我们将所有 js 文件合并为一个大文件后，可以进行重命名，方便 html 统一写入
-
del
这个是用来清除 dist 目录的，每次打包之前都先把上次打包的 clean 掉，反正新旧混一起，出现什么意想不到的
-
browser-sync
这个也很关键，看名字就知道，是用来启动本地服务的，并且可以做到更改代码后自动刷新浏览器预览最新效果
-
opn
配合 browser-sync 使用，打开特定的网页地址
npm i 插件名字 --save-dev
// 或者
yarn add 插件名字 --dev
至于具体的用法，推荐到 npm 官网去具体查询某个库，里面有详细的介绍和使用说明。
配置文件
gulp 主要是使用
gulpfile.js
文件来进行项目配置，在你的项目根目录下创建这个文件。gulp 通过 task 来创建一个任务，通过 gulp + 任务名来执行一个任务。比如下面这个示例：
var gulp = require('gulp')
var jshint = require('gulp-jshint')
gulp.task('jshint', done => {
gulp.src('./src/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
done()
});
上述代码首先引入了 gulp ，然后引入了 gulp-jshint 这个插件，记得先 npm install 下，接着使用 taks 定义了一个任务，src() 方法用于获取路径文件，可以使用正则进行快速匹配；pipe() 方法用于管道传输，可以多次调用，执行不同的操作。通过定义名为
jshint
的任务，执行它就会检查 src/js/ 目录下的所有 js 文件，在这之前，你可以在项目根目录下创建
.jshintrc
文件，在里面配置 js 代码的校验规则。这样在提交代码前，打开终端，进到项目目录下，执行
gulp jshint
，
就可以检查 js 代码。
这里注意的是，最新的 gulp4 的语法跟之前不同，每一个 task 都是一个异步任务，你可以像上面一个传递一个回调（done）, 在执行完后调用 done 回调表示完成，也可以直接写 async 语法，类似下面这样：
gulp.task('jshint', async() => {
await gulp.src('./src/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
});
基本使用就是这样。通常在项目里，我们需要一系列操作，压缩图片，代码，编译 scss/less 之类的，也就相应需要定义多个 task，这里列下我的配置文件，仅供参考：
var gulp = require('gulp');
// 插件
var jshint = require('gulp-jshint'); //js代码校验
var sass = require('gulp-sass'); //编译css
var imagemin = require('gulp-imagemin'); //压缩图片
var rev = require('gulp-rev') // 给文件添加 hash,防止缓存
var revCollector = require('gulp-rev-collector') // 把加 hash 的文件注入到 html
var gulpHtmlMin = require('gulp-htmlmin') // html 压缩
var uglify = require('gulp-uglify'); // js 压缩
var cleanCSS = require('gulp-clean-css') //css 压缩
// 浏览器实时预览
var browserSync = require('browser-sync');
var opn = require('opn');
var path = {
sass: './src/css/*.scss',
css: './src/css/*.css',
js: './src/js/*.js',
html: './src/*.html',
src: './'
};
// 检查脚本
gulp.task('jshint', done => {
gulp.src('./src/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
done();
});
// 编译Sass
gulp.task('sass', done => {
gulp.src('./src/css/*.scss')
.pipe(sass())
.pipe(gulp.dest('./src/css/'))
done()
});
gulp.task('css', done => {
gulp.src('./src/css/*.css')
.pipe(cleanCSS({ compatibility: 'ie8' }))
.pipe(rev())
.pipe(gulp.dest('./dist/css'))
.pipe(rev.manifest())
.pipe(gulp.dest('./rev/css'))
done()
})
gulp.task('sass:dev', done => {
gulp.src('./src/css/*.scss')
.pipe(sass())
.pipe(gulp.dest('./src/css/'));
done()
})
// 压缩图片
gulp.task('imagemin', done => {
gulp.src('./src/image/*.{png,jpg,gif,ico}')
.pipe(imagemin({
optimizationLevel: 5, //类型：Number 默认：3 取值范围：0-7（优化等级）
progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
}))
.pipe(gulp.dest('./dist/image'));
done()
});
// 合并，压缩js文件
gulp.task('scripts', done => {
gulp.src('./src/js/*.js')
.pipe(uglify())
.pipe(rev())
.pipe(gulp.dest('./dist/js'))
.pipe(rev.manifest())
.pipe(gulp.dest('./rev/js'));
done()
});
gulp.task('revCollector', done => {
gulp.src(['./rev/**/*.json', './src/*.html'])
.pipe(revCollector(
{
replaceReved: true,
dirReplacements: {
'css': './css',
'js': './js'
}
}
))
.pipe(gulpHtmlMin({
//删除空格
collapseWhitespace : true,
//删除注释
removeComments : true
}))
.pipe(gulp.dest('./dist'))
done()
})
// 启动服务，在浏览器打开
gulp.task('serve', done => {
browserSync.init({
server: {
baseDir: path.src
},
port: 5501,
open: false
}, function() {
var homepage = 'http://localhost:5501/src/index.html';
opn(homepage);
});
// 编译完sass后，无刷新方式更新页面
gulp.watch(path.sass, gulp.series('sass:dev'));
// 修改页面和js后，页面刷新，重新加载
gulp.watch([path.html, path.js, path.sass]).on("change", function() {
browserSync.reload();
});
done()
})
gulp.task('watch', done => {
gulp.watch('./src/css/*.scss', gulp.series('sass'));
gulp.watch('./src/js/*.js', gulp.series('jshint', 'scripts'));
gulp.watch('./src/image/**', gulp.series('imagemin'))
done()
})
gulp.task('build', gulp.series('jshint', 'sass', 'css', 'scripts', 'imagemin', 'revCollector'))
gulp.task('start', gulp.series('sass:dev', 'serve'))
可以看到，最后两句代码，使用 gulp.task 定义了一个 build 和 start 的任务，使用 gulp.series 将前面定义的任务都串联起来同步执行，所以执行
gulp start
，
就可以启动服务，在浏览器实时预览了；执行
gulp build
就可以打包压缩在 dist 目录下。我们可以在
package.json
文件中修改：
"scripts": {
"dev": "gulp start",
"build": "gulp build"
},
这样就可以执行
npm run dev
运行项目
，
npm run build
打包项目；如果你使用 yarn 的话，执行
yarn dev
和
yarn build
。
报错
-
Did you forget to signal async completion
解决：就是没有执行回调导致的，通过传入一个回调，比如 done ,结尾执行 done() 即可，或者直接写 async 和 await 。
-
AssertionError: Task function must be specified
解决：主要就是 gulp3 和 gulp4 语法的差异，以前写一个任务是：gulp.task('test', ['a', 'b'], …) 表示这个 test 任务在 a 和 b 执行完后才执行，这是以前的写法，现在应该用
gulp.series('a', 'b', 'test')
表示依次执行 a、b、test 。
总结
对于 gulp 的话，首先还是熟读官网文档，了解基本的语法和使用示例，然后就可以网上找对应的插件来使用，比如你想压缩图片，那就搜 gulp 相关的图片压缩插件，再去 npm 官网了解插件的具体操作。最后写 task 将这些插件串联起来执行，基本就是这样。
一个学前端的码农 发起了一个读者讨论 欢迎留言讨论，指出不足之处。
「Stay hungry，stay foolish.」
