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

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所建议的那样，我还主张切换到函数。尽管如此，所以您可以看到代码错误的地方，我已经在这里修复了它。 Gulp 4不会不使用以下语法：

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 4支持的签名，则可以使用gulp.task语法（而不是命名函数）。

具有命名功能的Gulp 4：

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

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

从gulp3迁移到具有相同错误消息的gulp4时，另请参见task never defined。

Answer 2

我建议将您的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 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'));
});

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

3 个答案: