更多内容欢迎来到博客：https://imjianjian.github.io
gulp简介
- 自动化 - gulp是一个工具包，可帮助您在开发工作流程中自动执行痛苦或耗时的任务。
- 与平台无关 - 集成被集成到所有主流IDE中，人们正在使用PHP，.NET，Node.js，Java和其他平台。
- 强大的生态系统 - 使用npm模块做任何你想要的，拥有超过2000个插件进行流文件转换。
- 简单 - 仅提供最少的API，易于学习和使用简单。 用gulp对自己的描述就是：Automate and enhance your workflow。
安装
要使用gulp要保证你的电脑上要有node环境
官方建议你这么安装它
//全局安装gulp命令行$ npm install gulp-cli -g//gulp4.0$ npm install gulp@next -D//gulp3.9.1$ npm install gulp -D //创建gulpfile.js文件$ touch gulpfile.js$ gulp --help复制代码
更新
- 新的任务系统（基于 bach，替换掉了原先基于 orchestrator 的任务系统）
- 移除 gulp.reset
- gulp.task 不再支持三个参数的用法
- gulp.task 用字符串注册的任务必须是直接在命令行中调用的任务
- gulp.task 可以接受单参数语法，这个参数必须是一个命名函数，函数名会被作为任务名
- 添加了 gulp.series 和 gulp.parallel 方法用于组合任务
- 添加了 gulp.tree 方法用于获取任务树，传入 { deep: true } 参数可以得到一个 archy 兼容的节点列表
- 添加了 gulp.registry 方法以定制注册表。
- 添加了 gulp.symlink 方法，功能和 gulp.dest 一致，不过是以软链接的方式
- gulp.dest 和 gulp.symlink 方法添加了 dirMode 参数允许对目标目录更好地控制
- gulp.src 接收的文件匹配字符串会顺序解释，所以你可以写成这样 gulp.src(['.js', '!b.js', 'bad.js'])（排除所有以 b 开头的 JS 文件但是除了 bad.js）
- gulp.src 方法添加了 since 选项，筛选在特定时间点之后修改过的文件（用于增量编译）
- 将命令行分离出来成为一个独立模块，以便节约带宽/空间。用 npm install gulp -g 或 npm install gulp-cli -g 都可以安装命令行，只是 gulp-cli 不包含模块代码所以比较小
- 命令行添加了 --tasks-json 参数，可以导出整个任务树以供他用
- 命令行添加了 --verify 参数用以检查 package.json 中是否包含黑名单插件（违背准则而被禁入官方插件列表的可怜娃们）。
API
gulp4在gulp3的基础上新增了几个函数，但它的使用依旧简单方便。一共如下10个：
- gulp.src() --全局匹配一个或多个文件
- gulp.dest() --将文件写入目录
- gulp.symlink() --与dest相似，但是使用软连接形式
- gulp.task() --定义任务
- gulp.lastRun() --获得上次成功运行的时间戳
- gulp.parallel() --并行运行任务
- gulp.series() --运行任务序列
- gulp.watch() --当文件发生变化时做某些操作
- gulp.tree() --获得任务书树
- gulp.registry() --获得或注册任务
官方说明API说明:https://github.com/gulpjs/gulp/blob/master/docs/API.md
task(parallel and series)
gulp4不再能够通过数组形式传入任务，你需要使用gulp.series()和gulp.parallel()来执行他们。例如：
gulp.task('default',gulp.parallel('taskA','taskB'));//并行执行gulp.task('default',gulp.series('taskA','taskB'));//按顺序执行复制代码 parallel和series函数可以接受函数作为参数，这意味着我们可以将任务用独立函数表示：
funcion taskA(){...}funcion taskB(){...}gulp.task(taskA);//最简单的方式gulp.task('i-am-taskB',taskB);//为taskB添加任务名gulp.task('taskA-taskB', gulp.series(taskA, taskB));//序列执行gulp.task('taskA-taskB', gulp.parallel(taskA，taskB));//并行运行复制代码 而且当我们执行序列化任务时，面板的输出也更加清晰
PS D:\github\resume> gulp[21:49:59] Using gulpfile D:\project\gulpfile.js[21:49:59] Starting 'default'...[21:49:59] Starting 'copyfile'...[21:49:59] Finished 'copyfile' after 90 ms[21:49:59] Starting 'minifyhtml'...[21:49:59] Finished 'minifyhtml' after 171 ms[21:49:59] Starting 'minifyCSS'...[21:50:00] Finished 'minifyCSS' after 353 ms[21:50:00] Starting 'uglyfyJS'...[21:50:01] Finished 'uglyfyJS' after 1.43 s[21:50:01] Finished 'default' after 2.05 s复制代码
gulp.lastRun()
语法：gulp.lastRun(taskName,timeResolution)参数：taskName:任务名timeResolution（可选）:返回的时间戳的精度复制代码
例如
gulp.lastRun('someTask', 1000) // 1426000004000.gulp.lastRun('someTask', 100) // 1426000004300.复制代码 gulp.tree()
语法:gulp.tree(option)options：{ deep:true/false //是否遍历每个子任务}复制代码 示例gulpfile.js
gulp.task('one', function(done) { // do stuff done();});gulp.task('two', function(done) { // do stuff done();});gulp.task('three', function(done) { // do stuff done();});gulp.task('four', gulp.series('one', 'two'));gulp.task('five', gulp.series('four', gulp.parallel('three', function(done) { // do more stuff done(); }) ));复制代码 实例输出
gulp.tree()// output: [ 'one', 'two', 'three', 'four', 'five' ]gulp.tree({ deep: true })/*output: [ { "label":"one", "type":"task", "nodes":[] }, { "label":"two", "type":"task", "nodes":[] }, { "label":"three", "type":"task", "nodes":[] }, { "label":"four", "type":"task", "nodes":[ { "label":" ", "type":"function", "nodes":[ { "label":"one", "type":"task", "nodes":[] }, { "label":"two", "type":"task", "nodes":[] } ] } ] }, { "label":"five", "type":"task", "nodes":[ { "label":" ", "type":"function", "nodes":[ { "label":"four", "type":"task", "nodes":[ { "label":" ", "type":"function", "nodes":[ { "label":"one", "type":"task", "nodes":[] }, { "label":"two", "type":"task", "nodes":[] } ] } ] }, { "label":" ", "type":"function", "nodes":[ { "label":"three", "type":"task", "nodes":[] }, { "label":" ", "type":"function", "nodes":[] } ] } ] } ] }]*/复制代码 gulp-load-plugins
这是一个用于自动加载插件的gulp插件，安装如下：
npm install gulp-load-plugins -D复制代码
当一个项目需要很多插件来管理的时候，你的gulpfile.js可能会变成这样：
var gulp = require('gulp'), a = require('gulp-a'), b = require('gulp-b'), c = require('gulp-c'), ... ... z = require('gulp-z'); 复制代码 使用gulp-load-plugins可以让你少写一些重复代码，你可以这样使用：
var gulp = require('gulp');//加载gulp-load-plugins插件，并马上运行它var plugins = require('gulp-load-plugins')();//或是：//var gulpLoadPlugins = require('gulp-load-plugins');//var plugins = gulpLoadPlugins();复制代码 调用插件
plugins.clone() //等价于require('gulp-clone')();复制代码 实质上是gulp帮助我们做了如下操作
plugins.clone= require(‘gulp-clone’); 复制代码