将[email protected]中的gulp watch转换为gulp @ 4

Question

我们正在从[email protected]切换到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建议的那样，我也提倡转换到功能。不过，所以你可以看到你的代码错误的地方，我在这里修复了它。 Gulp 4不使用以下语法：

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

Gulp 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

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

另请参阅task never defined，了解使用相同的错误消息从gulp 3迁移到gulp 4时的其他潜在问题。

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'));
});