gulp 4.0的变化

发表于 | 更新于: | 分类于 |
字数统计: 783 | 阅读时长 ≈ 3

升级日志

先来看看新版有什么不同（官方升级日志）：

  • 新的任务系统（基于 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 中是否包含黑名单插件（违背准则而被禁入官方插件列表的可怜娃们）。

安装gulp 4.0

# 如果安装过全局的 gulp 的话先卸载之
$ npm uninstall gulp -g

# 安装全局的 gulp 4.0
$ npm install "gulpjs/gulp#4.0" -g

# 到项目目录里删掉本地的 gulp
$ npm rm gulp --save-dev

# 安装本地的 gulp 4.0
$ npm install "gulpjs/gulp#4.0" --save-dev

gulp.task

1、移除了gulp.task传递三参数的用法 即这种用法将报错

gulp.task('watch', ['default'], function() {
    // TODO
    // watch file
});

在gulp4.0之前，这种用法将会保证default任务先执行完再执行watch任务，gulp的任务流程控制就是这么实现的，流程控制另外增加api实现，详看后面。

2、gulp.task又增加了一种用法，即传递一个具名函数作为参数，将自动注册以该函数名命名的任务

function clean(){}
function compile() {
    // do something...
}
gulp.task(clean);
gulp.task(compile);

等同于

gulp.task('clean', function() {
    // do something...
});
gulp.task('compile', function() {
    // do something...
});

任务流程控制

增加了gulp.series 串行任务和gulp.parallel 并行任务， 比原来的三参数写法要更加清晰。

function clean(){}
function copy(){}
function compile() {
    // do something...
}
gulp.task(clean);
gulp.task(copy);
gulp.task(compile);
gulp.task('clean-build', gulp.series('clean', 'copy', 'compile')); //任务将按顺序执行
gulp.task('build', gulp.parallel('copy', 'compile')); //任务将并发执行

只要在gulpfile.js中没有使用gulp.task传三个参数的用法，gulp 4.0也是兼容老版本的gulpfile.js的。

0%