問題描述

我們正在從 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));

這篇關于將 gulp@3.9.1 中的 gulp watch 轉換為 gulp@4的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！