更新到 gulp 4 - Shell-Bash

简介

gulp 是一个非常流行的前端自动化构建工具，能够简化日常的开发流程。它提供了许多方便的插件，可以帮助我们自动化处理一些任务，如压缩图片，合并 CSS/JS，代码检查等等。在 gulp 4 版本中，提供了一些新的特性以及改变了原有的一些 API，因此本文将介绍如何升级到 gulp 4 以及如何使用新的特性。

升级到 gulp 4

在升级到 gulp 4 之前，我们需要先删除原本的依赖：

npm rm --global gulp
npm rm --save-dev gulp

接着，我们需要安装新版本的 gulp：

npm install --global gulp-cli
npm install --save-dev gulp

为了防止在执行 gulp 时出现错误，我们需要对 gulp 的任务进行更新。在 gulpfile.js 中，原本的任务可能如下所示：

gulp.task('example', function() {
  // task code here
});

在 gulp 4 中，我们需要修改为以下代码：

gulp.task('example', function(done) {
  // task code here
  done();
});

需要注意的是，在 gulp 4 中，每个任务必须接收一个 done 参数，并在任务完成后调用该参数。如果任务不需要异步执行，也可以不传递该参数。

使用新特性

任务串行执行

在 gulp 4 中，我们可以使用新的 API gulp.series 和 gulp.parallel 实现任务的串行和并行执行。以串行执行为例，首先需要将 gulp 引入：

const gulp = require('gulp');

假设我们有三个任务需要串行执行，可以按照以下方式组织 gulpfile.js：

gulp.task('task1', function(done) {
  console.log('Task 1 is executed.');
  done();
});

gulp.task('task2', function(done) {
  console.log('Task 2 is executed.');
  done();
});

gulp.task('task3', function(done) {
  console.log('Task 3 is executed.');
  done();
});

gulp.task('default', gulp.series('task1', 'task2', 'task3'));

其中，gulp.series 将任务数组串行执行，输出结果如下：

Task 1 is executed.
Task 2 is executed.
Task 3 is executed.

文件监听

在 gulp 4 中，文件监听的 API 也有所变化。以监听 CSS 文件变化为例，需要按照以下方式组织 gulpfile.js：

gulp.task('watch:css', function() {
  return gulp.watch('./src/css/**/*.css', gulp.series('task1', 'task2', 'task3'));
});

其中，gulp.watch 接受两个参数：第一个参数为需要监听的文件路径，第二个参数为需要执行的任务数组。在任务执行时，如果文件发生变化，gulp.watch 将自动重新执行任务。

总结

本文介绍了如何升级到 gulp 4，以及如何使用新的特性。在实际应用中，我们可以根据自己的需要选择特定的插件和 API，将 gulp 打造成适合自己项目的自动化构建工具。