将gulp@3.9.1中的gulp表转换为gulp@4

Question

我们正在从gulp@3.9.1切换到gulp@4，并且在切换方面遇到了困难。当我们运行gulp watch时，我们得到以下错误，并试图找出如何解决它。

将gulp watch gulp@4**?**任务转换为使用任务的正确方法是什么？

错误消息

AssertionError ERR_ASSERTION:任务从未定义：minify-css

gulp watch 命令：

• 它应该运行minify-js，然后按顺序运行minify-css
• minify-js应在clean-scripts成功完成后运行
• minify-css应在clean-css成功完成后运行

当前任务.

​

var gulp = require('gulp'),
    cssmin = require('gulp-clean-css'),
    clean = require('gulp-clean'),
    uglify = require('gulp-uglify');
    
var src = {
  js: 'js/some-dir/**/*.js',
  css: 'css/some-dir/**/*.css'
};

var dest = {
  js: 'js/dest/some-dir/**/*.js',
  css: 'css/dest/some-dir/**/*.css'
};

gulp.task('clean-css', function() {
  return gulp.src(dest.css)
             .pipe(clean({read:false, force: true});
});

gulp.task('minify-css', ['clean-css'], function() {
  gulp.src(src.css)
    .pipe(cssmin())
    .pipe(gulp.dest(dest.css));
});

gulp.task('clean-scripts', function() {
  return gulp.src(dest.js)
             .pipe(clean({read:false, force: true});
});

gulp.task('minify-js', ['clean-scripts'], function() {
   gulp.src(src.js)
       .pipe(uglify())
       .pipe(gulp.dest(dest.js));
});

gulp.task('watch', ['minify-js', 'minify-css'], function() {
  gulp.watch(src.js, ['minify-js']);
  gulp.watch(src.css, ['minify-css']);
});

​

我们尝试过这样做，但是它导致了错误消息

​

gulp.task('watch', gulp.series('minify-js', 'minify-css', function() {
  gulp.watch(src.js, ['minify-js']);
  gulp.watch(src.css, ['minify-css']);
}));

​

Answer 1

我建议将minify-js、minify-css、clean-scripts和clean-css任务转换为函数：

var dest = {
  js: 'js/dest/some-dir/**/*.js',
  css: 'css/dest/some-dir/**/*.css'
};

function cleanCss() {
  return gulp.src(dest.css)
             .pipe(clean({read:false, force: true});
});

function minifyCss() {
  return gulp.src(src.css)
             .pipe(cssmin())
             .pipe(gulp.dest(dest.css));
});

function cleanScripts() {
  return gulp.src(dest.js)
             .pipe(clean({read:false, force: true});
});

function minifyJs() {
   return gulp.src(src.js)
       .pipe(uglify())
       .pipe(gulp.dest(dest.js));
});

var minifyJsAndClean = gulp.series(minifyJs, cleanScripts);
var minifyCssAndClean = gulp.series(minifyCss, cleanCss);
var watchers = function (done) {
   gulp.watch(src.js, minifyJs);
   gulp.watch(src.css, minifyCss);
   done();
}

gulp.task('watch', gulp.series(minifyJsAndClean, minifyCssAndClean, watchers));

Answer 2

gulp.task('minify-css', gulp.series('clean-css', function() {
  return gulp.src(src.css)
    .pipe(cssmin())
    .pipe(gulp.dest(dest.css));
}));

gulp.task('minify-js', gulp.series('clean-scripts', function() {
   return gulp.src(src.js)
       .pipe(uglify())
       .pipe(gulp.dest(dest.js));
}));

gulp.task('watch', gulp.series('minify-js', 'minify-css', function() {
  gulp.watch(src.js, gulp.series('minify-js'));
  gulp.watch(src.css, gulp.series('minify-css'));
}));

正如@Abdaylan建议的那样，我也主张改用函数。尽管如此，您可以看到您的代码哪里错了，我已经在这里修复了它。GUP4是否而不是使用以下语法：

gulp.task('someTask', ['task1', 'task2'], function () {});  // gulp 3

吞咽4：

gulp.task('someTask', gulp.series('task1', 'task2', function () {}));  // gulp 4 with string tasks

或gulp.parallel.因此，您可以使用gulp.task语法(而不是命名函数)，如果您修改它们以使用GUP4支持的签名，就像我在这个答案顶部的修改代码中所做的那样。

具有命名函数的GUP4：

gulp.task(someTask, gulp.series(task1, task2, function () {}));  // gulp 4 with named functions

因此，对于命名函数，这些任务不被称为字符串。

在使用相同的错误消息从gulp3迁移到gulp4时，请参见gulp3中的其他潜在问题。

Answer 3

几天前我就碰到这个了。对我起作用的是在它自己的gulp.watch()中运行每个任务，在监视任务调用上使用gulp.series()，而不是使用监视任务本身。例如：

gulp.task('watch', function() {
  gulp.watch(src.js, gulp.series('minify-js'));
  gulp.watch(src.css, gulp.series('minify-css'));
});