javascript - gulp，任务单独工作，但不能分组工作

Question

我有 3 个任务要按顺序运行:clean、mincat，然后 serve

var gulp = require('gulp');
var webserver = require('gulp-webserver');
var usemin = require('gulp-usemin');
var uglify = require('gulp-uglify');
var minifyHtml = require('gulp-minify-html');
var minifyCss = require('gulp-minify-css');
var rev = require('gulp-rev');
var rename = require('gulp-rename');
var del = require('del');
var sequential = require('run-sequence');

gulp.task('clean', function () {
    del(['./build/*.*', './build/*']);
});

gulp.task('mincat', function () {
    gulp.src('./Index.html')
      .pipe(usemin({
          css: [minifyCss(), 'concat'],
          html: [minifyHtml({ empty: true })],
          js: [uglify()],
          js1: [uglify()]
      }))
      .pipe(gulp.dest('./build/'));
});

gulp.task('serve', function () {
    gulp.src('build')
      .pipe(webserver({
          host: 'localhost',
          port: 8080,
          livereload: true,
          open: true
      }));
});

gulp.task('dev', function () {
    sequential('clean','mincat','serve');
});

如果我从命令提示符中一一运行 3 个任务，它就会起作用

gulp clean
gulp mincat
gulp serve

现在我创建了一个任务来使用单个命令运行所有 3 个任务，但它不起作用。我尝试了所有的表格

1. 添加了运行顺序插件

   gulp.task('dev', function () {
顺序('干净'，'mincat'，'服务')；
});

2. 最初并行运行

   gulp.task('dev', ['clean','mincat','serve'])

3. 我也尝试过分开发球

   gulp.task('dev', ['clean','mincat'] function () {
gulp.start('服务');
})

但是这些都不起作用，有人可以指出这个问题吗？

Answer 1

首先，您的2无法工作，因为 gulp 依赖项都是并行运行的，没有特定的顺序。 3 可以工作，但并不真正推荐，因为它不遵循 gulp 准则。

这让我们1。您所做的是正确的，但您遇到的问题是 gulp 不知道您的任务何时完成，因此相当于并行运行所有内容。

要使任务同步，您必须返回它的流。由于 del 不是流，因此您只需使用callback。对于您的 serve，我认为您不必这样做，因为它终于启动了。

这看起来像:

gulp.task('clean', function (cb) {
  del(['./build/*.*', './build/*'], cb);
});

gulp.task('mincat', function () {
  return gulp.src('./Index.html')
    .pipe(usemin({
      css: [minifyCss(), 'concat'],
      html: [minifyHtml({ empty: true })],
      js: [uglify()],
      js1: [uglify()]
    }))
    .pipe(gulp.dest('./build/'));
});

我不明白为什么你可以考虑 .js1 文件，顺便说一句，你的 index.html 应该是小写:)