共计 2645 个字符，预计需要花费 7 分钟才能阅读完成。
gulp
简介
用自动化构建工具增强你的工作流程。
通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。
利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。
Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。
通过最少的 API，掌握 Gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。
gulp 和 webpack 都是前端著名的构建工具，通过一定的配置，几乎能实现一模一样的功能，但是 gulp 在使用上与 webpack 不同的点是，gulp 要实现什么功能是以写脚本的方式自定义，而 webpack 以配置文件的方式，个人觉得通过 gulp 提供的方式自定义工作流更容易实现，也更透明，自己写插件也能方便的理清楚插件什么时候被调用，需要接收和输出什么东西。所以即使你会了 webpack，学习 gulp 也是非常有必要的。
demo
安装
npm i -g gulp-cli
npm i -D gulp
编写 gulpfile.js，gulp 默认执行 gulpfile.js 文件
var gulp = require(‘gulp’);
gulp.task(‘default’, function (cb) {
console.log(‘task default’)
cb()
})
gulp.src
读取需要处理的文件，以便进行后续的处理。第一个参数：匹配模式字符串或字符串数组。了解 Globs 第二个参数：可选，通过 glob-stream 所传递给 node-glob 的参数。返回：Vinyl files 的 stream。通过 pipe(..) 将文件流向后续插件传输。
gulp.dest
通过 pipe(..) 输入文件流，将文件写入硬盘，并输出所有数据，能继续向下游 pipe，所以文件流可以继续被处理并被写入到其他地方。如果写入文件夹不存在，就会创建它。第一个参数：文件被写入的路径第二个参数：option.mode 默认 0777 八进制权限字符串，定义输出目录中创建的目录的权限；
`option.cwd` 输出目录的 `cwd` 参数，只在所给的输出目录是相对路径时候有效。
gulp.src(‘src/*.js’) // 读取 src 文件夹下的所有.jpg 文件
.pipe(imagemin()) // 将所有文件用 imagemin 处理
.pipe(gulp.dest(‘dist’)) // 将处理到这一步的文件写入 dist 文件夹
.pipe(minify()) // 将文件流用 minify 处理
.pipe(gulp.dest(‘code’)) // 将处理后的文件写入 code 文件夹
gulp.task
定义一个任务第一个参数：任务的名字，如果你定义的任务需要在命令行中启动，那就不要使用空格。第二个参数：Array，当前任务依赖的任务列表，依赖任务在当前任务运行之前完成。（gulp4 已经去除）第三个参数：fn，函数中定义任务需要执行的一些操作。
第三个参数 fn 可以接受一个参数，该参数接收一个 callback，在函数中调用 callback 可以标识该任务是否执行完成。返回一个 stream 或者 promise，也有类似的作用。gulp 中实现任务依赖（任务并行或串行）的方法
gulp.task(‘one’, function (cb) {
setTimeout(() => {
console.log(1)
cb()
}, 1000)
})
gulp.task(‘two’, function (cb) {
console.log(2)
cb()
})
// 老版本序列化任务的方式
gulp.task(‘default’, [‘one’], function(cb){
console.log(‘over’)
cb()
})
// gulp4 实现串行任务的方式
gulp.task(‘default’, gulp.series(‘one’, ‘two’, function(cb){
console.log(‘over’)
cb()
}))
// gulp4 实现并行任务的方式
gulp.task(‘default’, gulp.parallel(‘one’, ‘two’, function(cb){
console.log(‘over’)
cb()
}))
gulp.watch
监控文件的变化，执行相应的任务第一个参数：要监视的 glob（也可以理解成文件或文件夹）。第二个参数：options 第三个参数：要执行的具体任务内容
gulp.watch(‘img’, gulp.series(‘string’))
编写插件
从 gulp 的用时方法不难看出，gulp 插件接收 stream，处理后返回 stream，但是在插件中可能使用到其他工具，其中处理文件的数据类型可能是 Buffer，所以我们经常在写插件时用到 throungh，他是一个可以 Buffer 和 stream 相互装换的工具，下面是一个压缩图片的插件例子。images 库是一个能处理图片的 nodejs 库，但是他的提供的 api 处理单张图片，将他封装成 gulp 插件，将他赋予批量处理图片的能力，并且能和其他处理工具一起使用，方便的实现一个工作流，比如将一个文件夹中的图片压缩后，在将其打包成一个压缩包。
var through = require(‘through2’); // Buffer 和 stream 装换库
const images = require(‘images’); // 图片处理库
// 插件级别的函数（处理文件
function gulpPrefixer(options) {
const {
size
} = options
var stream = through.obj(function(file, enc, cb) {
if (file.isBuffer()) {
file.contents = images(file.contents)
.size(size)
.encode(‘png’)
}
// 确保文件进入下一个 gulp 插件
this.push(file);
// 告诉 stream 引擎，我们已经处理完了这个文件
cb();
});
// 返回文件 stream
return stream;
};
// 导出插件主函数
module.exports = gulpPrefixer;
作者简介：叶茂，芦苇科技 web 前端开发工程师，代表作品：口红挑战网红小游戏、芦苇科技官网。擅长网站建设、公众号开发、微信小程序开发、小游戏、公众号开发，专注于前端框架、服务端渲染、SEO 技术、交互设计、图像绘制、数据分析等研究。
欢迎和我们一起并肩作战：web@talkmoney.cn 访问 www.talkmoney.cn 了解更多
