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

2022-01-12 00:00:00 javascript css npm gulp

我们正在从 gulp@3.9.1 切换到 gulp@4 并且在切换时遇到问题.当我们运行 gulp watch 时，我们会收到以下错误并试图找出解决方法.

We are switching from gulp@3.9.1 to gulp@4 and are having trouble switching over. When we run gulp watch, we are getting the following errors and trying to figure out how to resolve it.

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

What is the proper way to convert the gulp watch task to work with gulp@4?

错误信息

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

AssertionError [ERR_ASSERTION]: Task never defined: minify-css

命令:gulp watch

  • 这应该按顺序运行 minify-js 然后 minify-css
  • minify-js 应该在 clean-scripts 成功完成后运行
  • minify-css 应该在 clean-css 成功完成后运行
  • This should run minify-js then minify-css in order
  • minify-js should run after clean-scripts has completed successfully
  • minify-css should run after clean-css has completed successfully

当前任务.

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

推荐答案

我建议你转换你的 minify-js, minify-css, clean-scripts 和 clean-css 任务到函数:

I would recommend converting your minify-js, minify-css, clean-scripts and clean-css tasks to functions:

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

相关文章