图解Gulp使用指南

691 阅读2分钟

gulp适合处理小微型任务,比如操作文件系统,包括移动、删除、重命名等操作。除了可以使用gulp插件,开发者还可以自己创建插件。

安装必要依赖

安装node和npm然后安装gulp-cli和gulp - 陈帅华涂鸦

确保系统中安装了最新版本的node和npm。使用npm命令全局安装gulp-cli,随后在本地项目中使用npm安装gulp。

创建配置文件

gulpfile配置文件 - 陈帅华涂鸦

gulp的默认配置文件是gulpfile.js,gulpfile.js中导出一系列任务,这些任务其实是一个个异步执行的函数,这些任务中有一个特殊的默认任务,默认任务的存在简化了gulp命令书写形式。命令中输入gulp执行默认任务,即exports.default指向的异步函数。exports.build和exports.csh分别对应的gulp任务执行命令是gulp build和gulp csh。除了default任务之外,开发者可以定义许多自定义名称的任务。

配置导出任务与gulp命令关系 - 陈帅华涂鸦

顺序、并发任务

series函数接收任意个数的异步任务函数作为参数,并按顺序执行这些任务。parallel函数接收任意个数的异步任务函数作为参数,并尽可能并发执行这些任务以节约时间。

gulp中series和parallel函数原理 - 陈帅华涂鸦

顺序任务常常用来执行一组有先后执行顺序的任务,如何先将js文件中的es2015+语法转换成es5语法,然后再将转换后的内容输出到目标文件中。同步执行任务常常用来并发执行互相不相关的任务,比如编译scss文件并输出到目标文件和编译ts边检并输出到目标文件是两个互不干扰的任务,可以选择同步执行的方式执行。

顺序任务中可以包含并发任务,并发任务里也可以包含顺序任务。series()函数和parallel()函数是可以相互嵌套的。

异步任务

在gulpfile.js中,每一个任务对应一个函数,函数的返回值应该总是异步的。常见的异步机制有很多。NodeJS中的方法基本上默认都是异步的,比如对于fs.readFile()方法,最后一个参数就是一种异步机制,最后一个参数传入一个函数,第一个参数总是错误信息,如果读取文件成功则为null,第二个参数才是文件内容。

除了NodeJS中这种error-first形式的回调函数,还有stream,promise,event emitters,child processes和observables。如果要为gulp中最常用的异步机制排序,error-first回调函数排第一,stream排第二,promise排第三,其它跟随其后。