gulpfile.js - 版本 3 到 4 迁移

Question

几年前，我设置了 vs 代码，以在某种程度上复制我用于设计网站的当前方法（使用独立应用程序）。我当时决定我会坚持我正在使用的东西。由于不再维护这些应用程序，我现在遇到了编译问题 - 是时候进行跳跃了。

我的 gulpfile.js 有问题，这是我最初尝试这一切时的问题。我保存了它以防我需要返回使用 vs 代码。问题显然是这种格式不再有效，因为 gulp 已经更新。现在所有这些对我来说基本上都是陌生的，虽然我了解正在做什么，但我还不够了解，无法将其修改为 gulp 4^ 的当前方法。

有人可以帮我解决这个问题吗？我看过关于系列和并行等的指南。我想通过查看一个工作示例对我来说更容易理解。

我的旧 gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var cleanCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');

//processes the scss files in this folder
//minimizes them
gulp.task('sass', function () {
    return gulp.src('_config/scss/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(cleanCSS())
        .pipe(gulp.dest('assets/css'));
});

//minifies all js files in this folder
gulp.task('js', function () {
    return gulp.src('_config/js/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('assets/js'));
});

//minifies all js files in this folder
gulp.task('scripts', function () {
    return gulp.src('_config/scripts/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('assets/scripts'));
});

//creates 'watchers' that run tasks on specific activities
gulp.task('watch', function () {
    gulp.watch('_config/scss/**/*.scss', ['sass']);
    gulp.watch('_config/js/**/*.js', ['js']);
    gulp.watch('_config/scripts/**/*.js', ['scripts']);
    gulp.watch('_config/img/**/*', ['img']);
});

//this is the default task that runs everything
gulp.task('default', ['sass', 'js', 'scripts', 'watch']);

Answer 1

你离你需要去的地方并不远。更改此代码：

gulp.task('watch', function () {
    gulp.watch('_config/scss/**/*.scss', ['sass']);
    gulp.watch('_config/js/**/*.js', ['js']);
    gulp.watch('_config/scripts/**/*.js', ['scripts']);
    gulp.watch('_config/img/**/*', ['img']);
});

gulp.task('default', ['sass', 'js', 'scripts', 'watch']);

到

gulp.task('watch', function () {
    gulp.watch('_config/scss/**/*.scss', gulp.series('sass'));
    gulp.watch('_config/js/**/*.js', gulp.series('js'));
    gulp.watch('_config/scripts/**/*.js', gulp.series('scripts'));
    gulp.watch('_config/img/**/*', gulp.series('img'));
});


gulp.task('default', gulp.series('sass', 'js', 'scripts', 'watch'));

gulp.task 现在有这个签名：gulp.task([taskName], taskFunction)

在 gulp v3 之前使用任务数组作为第二个参数。 gulp v4 使用一个函数，如gulp.series() 或gulp.parallel()，作为第二个参数。 gulp.series() 将任务列表作为其参数。由于您使用gulp.task() 方法创建任务，因此series 中的任务名称应显示为字符串，如'sass'、'js' 等。

---

注意：在 v4 中创建任务的首选方式如下：

function scripts() {
    return gulp.src('_config/scripts/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('assets/scripts'));
});

然后您将在series 中使用这些函数名称作为gulp.series(scripts, js) - 而不是作为字符串。您应该考虑使用这种形式的任务。

---

gulp.watch()签名：gulp.watch(globs, [options], [task])

[task] 可以是单个任务名称，例如您的'sass' 或组合 任务，这仅表示使用series 或parallel 生成的任务。

在您的情况下，您在每个 watch 语句中只运行一个任务，所以

gulp.watch('_config/scss/**/*.scss', 'sass');

应该足够了。我将它们显示为组合任务，例如：

gulp.watch('_config/scss/**/*.scss', gulp.series('sass'));

如果将来您希望在文件更改时运行多个任务。在这种情况下，您可以使用以下内容：

gulp.watch('_config/scss/**/*.scss', gulp.series('sass', 'serve'));

例如。

---

最后将gulp-uglify 换成gulp-terser。 gulp-terser 将处理 gulp-uglify 无法处理的 es6 语法。 gulp-terser