gulp4.0.2_如何迁移到Gulp.js 4.0
gulp4.0.2
尽管有来自webpack和Parcel的竞争， 但是 Gulp.js仍然是最受欢迎JavaScript任务执行者之一。 Gulp.js使用代码进行配置，这使其成为通用的通用选项。 与通常的转堆，捆绑和实时重装一样，Gulp.js可以分析数据库，渲染静态站点，推送Git提交并使用单个命令发布Slack消息。 了解如何迁移到Gulp.js 4.0。
有关Gulp的介绍，请查看以下内容：
- Gulp.js简介
- 如何使用Gulp.js自动化CSS任务
- 用Gulp更快地开发WordPress主题
Gulp.js 4.0
Gulp.js 3.x已成为默认设置约五年了。 直到最近， npm install gulp仍会安装3.9.1 —上面教程中引用的版本。
Gulp.js 4.0一直可用，但是必须通过npm install gulp@next进行明确安装。 部分原因是由于正在进行的开发，并且因为Gulp.js 4 gulpfile.js配置文件与为版本3开发的文件不兼容。
在2018年12月10日， Gulp.js 4.0被宣布为默认设置并发布到npm 。 在新项目上使用npm install gulp任何人都将获得版本4。
是否有必要迁移到Gulp.js 4？
不可以。Gulp.js3已被弃用，不太可能收到进一步的更新，但仍可以使用。 除非在package.json的dependencies部分中显式更改了版本，否则现有项目将不会更新。 例如：
"dependencies": {
"gulp": "^4.0.0"
}您还可以使用以下命令在新项目中安装Gulp.js 3：
npm install gulp@^3.9.1如果您具有特别复杂，关键任务的构建系统，则最好坚持使用Gulp.js3.x。
但是，现有的Gulp.js插件应该兼容，大多数gulpfile.js配置可以在一两个小时内完成迁移。 升级有很多好处，在本教程中将显而易见。
升级到Gulp.js 4.0
如上所示更新您的package.json依赖项，然后运行npm install进行升级。 您也可以使用npm i gulp-cli -g更新命令行界面，尽管在编写本文时此操作没有改变。
要检查安装，请在命令行中输入gulp -v ：
$ gulp -v
[15:15:04] CLI version 2.0.1
[15:15:04] Local version 4.0.0迁移gulpfile.js
现在，执行任何任务都可能会引发令人恐惧的错误。 例如：
AssertionError [ERR_ASSERTION]: Task function must be specified
at Gulp.set [as _setTask] (/node_modules/undertaker/lib/set-task.js:10:3)
at Gulp.task (/node_modules/undertaker/lib/task.js:13:8)
at /gulpfile.js:102:8
at Object. (/gulpfile.js:146:3)
at Module._compile (internal/modules/cjs/loader.js:688:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
at Module.load (internal/modules/cjs/loader.js:598:32)
at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
at Function.Module._load (internal/modules/cjs/loader.js:529:3)
at Module.require (internal/modules/cjs/loader.js:636:17)
at require (internal/modules/cjs/helpers.js:20:18)
at execute (/gulp-cli/lib/versioned/^4.0.0/index.js:36:18)
at Liftoff.handleArguments (/gulp-cli/index.js:175:63)
at Liftoff.execute (/gulp-cli/node_modules/liftoff/index.js:203:12)
at module.exports (/gulp-cli/node_modules/flagged-respawn/index.js:51:3)
at Liftoff. (/gulp-cli/node_modules/liftoff/index.js:195:5) 这令人生畏，但是您可以忽略除gulpfile.js的第一个参考以外的所有内容，该参考显示了遇到错误的行（此示例中为102）。
幸运的是，大多数错误是由相同类型的问题引起的。 以下各节以CSS任务教程代码为例。 该代码可在GitHub上获得，并提供原始的Gulp.js 3 gulpfile.js和已迁移的Gulp.js 4等价物 。
将任务数组转换为series（）调用
Gulp.js 3允许指定同步任务数组。 通常在触发watch事件或任务具有依赖项时使用。 例如，在css任务之前运行images任务：
gulp.task('css', ['images'], () =>
gulp.src(cssConfig.src)
// .other plugins
.pipe(gulp.dest(cssConfig.build));
); Gulp.js 4.0引入了series()和parallel()方法来组合任务：
-
series(...)按指定的顺序一次运行一个任务，并且 -
parallel(...)以任何顺序同时运行任务。
复杂的任务可以嵌套到任何级别，这在Gulp.js 3中是很难实现的。例如，并行运行任务a和b ，然后，一旦完成，就并行运行任务c和d ：
gulp.series( gulp.parallel(a, b), gulp.parallel(c, d) ) 通过将数组更改为series()方法调用，可以将上述css任务迁移到Gulp.js 4：
gulp.task('css', gulp.series('images', () =>
gulp.src(cssConfig.src)
// .other plugins
.pipe(gulp.dest(cssConfig.build));
)); // remember the extra closing bracket!异步完成
Gulp.js 3允许使用同步功能，但是这些功能可能会引入难以调试的错误。 考虑不返回gulp流式传输值的任务。 例如，一个clean任务来删除build文件夹：
const
gulp = require('gulp'),
del = require('del'),
dir = {
src : 'src/',
build : 'build/'
};
gulp.task('clean', () => {
del([ dir.build ]);
});
免费学习PHP！
全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。
原价$ 11.95 您的完全免费
Gulp.js 4.0会发出警告，因为它需要知道任务何时完成才能管理series()和parallel()序列：
[15:57:27] Using gulpfile gulpfile.js
[15:57:27] Starting 'clean'...
[15:57:27] The following tasks did not complete: clean
[15:57:27] Did you forget to signal async completion? 为了解决这个问题，Gulp.js 4将接受一个返回的Promise （由del包支持） ：
gulp.task('clean', () => {
return del([ dir.build ]);
});
// or use the simpler implicit return:
// gulp.task('clean', () => del([ dir.build ]) ); 或者，传递一个在完成时执行的回调函数（ del还提供了一个同步sync()方法） ：
gulp.task('clean', (done) => {
del.sync([ dir.build ]);
done();
});这是带有监视任务的更复杂的Gulp.js 3示例：
gulp.task('default', ['css', 'server'], () => {
// image changes
gulp.watch(imgConfig.src, ['images']);
// CSS changes
gulp.watch(cssConfig.watch, ['css']);
}); 这些可以迁移到Gulp.js 4 series()方法和done()回调中：
gulp.task('default', gulp.series('css', 'server', (done) => {
// image changes
gulp.watch(imgConfig.src, gulp.series('images'));
// CSS changes
gulp.watch(cssConfig.watch, gulp.series('css'));
done();
}));温馨提示：将任务方法转换为ES6模块
一旦将任务数组转换为series()调用并且异步函数完成了信号，则大多数gulpfile.js配置都将在Gulp.js 4.0中运行。
尽管仍支持task()定义方法，但较新的ES6模块exports模式具有以下优点：
- 私人任务可以定义它可以被称为内
gulpfile.js但不能从gulp命令。 - 可以通过引用而不是字符串名称来传递函数，因此编辑器可以突出显示语法错误。
- 可以使用任意多个任务名称来引用相同的功能。
- 在
series()和/或parallel()定义复杂的依赖关系会更容易。
进行以下Gulp.js 3 images和css任务：
gulp.task('images', () =>
gulp.src(imgConfig.src)
// .other plugins
.pipe(gulp.dest(imgConfig.build))
);
gulp.task('css', ['images'], () =>
gulp.src(cssConfig.src)
// .other plugins
.pipe(gulp.dest(cssConfig.build))
);这些可以转换为使用Gulp.js 4模块模式：
function images() {
return gulp.src(imgConfig.src)
// .other plugins
.pipe(gulp.dest(imgConfig.build));
}
exports.images = images;
exports.pics = images;
function css() {
return gulp.src(cssConfig.src)
// .other plugins
.pipe(gulp.dest(cssConfig.build));
}
exports.css = gulp.series(images, css);
exports.styles = exports.css; 注意：必须添加return语句，因为带有隐式return的ES6 arrow =>函数已更改为标准函数定义。
在此Gulp.js 4示例中：
-
gulp images或gulp pics均可用于运行images()任务 -
gulp css或gulp styles都将运行images()然后再运行css()。
设置exports.default以定义从命令行执行gulp而没有特定任务时运行的默认任务。
吞咽善良
CSS任务示例 ，优化图像，编译Sass，缩小CSS并实时重新加载更改，花费了不到一小时的时间进行了转换。 检查GitHub上的代码以查看：
- 原始的Gulp.js 3 gulpfile.js ，以及
- 迁移的Gulp.js 4 gulpfile.js 。
（正确）花费了一段时间，但是Gulp.js 4提供了定义在版本3中不切实际的任务的机会。更新软件似乎是在浪费开发工作，但是您会得到更快的回报，更强大的任务集，从长远来看将节省时间。
翻译自: https://www.sitepoint.com/how-to-migrate-to-gulp-4/
gulp4.0.2