Javascript 把手表吞进去gulp@3.9.1到gulp@4

我们正在从

gulp@3.9.1

至

gulp@4

，切换时遇到问题。当我们运行

gulpwatch

时，会出现以下错误，并试图找出解决方法

将

gulp watch

任务转换为

gulp@4

？

错误消息

断言错误[错误断言]：从未定义任务：

缩小css

命令：

gulpwatch

• 这应该依次运行

  minifyjs

  ，然后

  minifycss

• minify js

  应在

  clean scripts

  成功完成后运行

• minify css

  应在

  clean css

  成功完成后运行

当前任务。

var gulp=require（'gulp'），
cssmin=require（'gulp-clean-css'），
清洁=需要（'gulp-clean'），
uglify=需要（'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（）{
返回gulp.src（dest.css）
.pipe（干净（{read:false，force:true}）；
});
gulp.task（'minify-css'，['clean-css']，function（））{
gulp.src（src.css）
.pipe（cssmin（））
.管道（大口目的地（目的地css））；
});
gulp.task（'clean-scripts'，function（））{
返回一口src（dest.js）
.pipe（干净（{read:false，force:true}）；
});
gulp.task（'minify-js'，['clean-scripts'，function（））{
gulp.src（src.js）
.管道（丑（）
.管道（大口目的地（目的地js））；
});
gulp.task（'watch'，['minify-js'，'minify-css']，function（））{
大口喝手表（src.js，['minify-js']）；
watch（src.css，['minify-css']）；
})；

我建议将

缩小js

、

缩小css

、

清理脚本

和

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

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

---

我建议将

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

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

---

几天前我自己就遇到了这个问题。对我来说，有效的方法是在watch任务调用中使用

gulp.series（）

而不是watch任务本身运行每个任务。例如：

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

---

几天前我自己就遇到了这个问题。对我来说，有效的方法是在watch任务调用中使用

gulp.series（）

而不是watch任务本身运行每个任务。例如：

gulp.task('watch', 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.task

语法（而不是命名函数）修改为使用gulp 4支持的签名，就像我在这个答案顶部的修改代码中所做的那样，您可以使用

gulp.task

语法

带命名函数的Gulp 4：

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.task(someTask, gulp.series(task1, task2, function () {}));  // gulp 4 with named functions

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

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

正如@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.task

语法（而不是命名函数）修改为使用gulp 4支持的签名，就像我在这个答案顶部的修改代码中所做的那样，您可以使用

gulp.task

语法

带命名函数的Gulp 4：

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.task(someTask, gulp.series(task1, task2, function () {}));  // gulp 4 with named functions

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

---

另请参阅，了解从gulp3迁移到具有相同错误消息的gulp4时可能出现的其他问题。

移动到

命名函数

实现解决了问题。移动到

命名函数

实现解决了问题。