javascript - Gulp 任务未按预期工作

Question

我有 2 项任务:

• whitelabel - 我有一个 gulp 任务，它将给定的whitelabel 项目复制到文件夹中
• sass - 在该文件夹中编译 sass 项目

我的问题是，当我让它们在我的默认任务上按顺序运行时，CSS 文件被复制，但 sass 任务没有生成它应该生成的 css。但是，如果我运行一个任务而不是另一个任务，则会生成 css 文件。

我错过了什么？

白标任务

gulp.task('whitelabel', function() {
    var argv = yargs.argv;
    if (argv.whitelabel){
      gulp.src('./whitelabels/_template/**/*')
      .pipe(gulp.dest('./assets'));
      return gulp.src('./whitelabels/'+ argv.whitelabel +'/**/*')
      .pipe(gulp.dest('.'));
    } else {
      return gulp.src('./whitelabels/_template/**/*')
      .pipe(del.sync(['./assets/']))
      .pipe(gulp.dest('.'));
    }
});

SASS 任务

gulp.task('sass', function() {
  return gulp.src('assets/styles/style.scss')
    .pipe($.sourcemaps.init())
    .pipe($.sass({
      style: 'expanded'
    }))
    .on('error', $.notify.onError({
      title: 'SASS Failed',
      message: 'Error(s) occurred during compile!'
    }))
    .pipe($.sourcemaps.write())
    .pipe(gulp.dest('assets/styles'))
    .pipe(reload({
      stream: true
    }))
    .pipe($.notify({
      message: 'Styles task complete'
    }));
});

默认任务

gulp.task('default', ['config', 'browser-sync', 'whitelabel', 'sass', 'minify-css'], function() {
  gulp.watch('whitelabels/_template/assets/styles/*.css', function(file) {
    if (file.type === "changed") {
      reload(file.path);
    }
  });
  gulp.watch(['*.html', 'app/**/*.html', 'views/*.html'], ['bs-reload']);
  gulp.watch(['whitelabels/_template/assets/js/*.js'], ['whitelabel','bs-reload']);
  gulp.watch(['app/*.js'], ['bs-reload']);
  gulp.watch('whitelabels/_template/assets/styles/**/*.scss', ['whitelabel', 'sass', 'minify-css']);
});

Answer 1

您的原始默认任务不保证任务按任何特定顺序运行 - 事实上它们是并行运行的。

很多人使用 run-sequence https://www.npmjs.com/package/run-sequence按指定顺序运行任务。

或者您可以通过

使“whitelabel”任务成为 sass 任务的依赖项

gulp.task('sass', ['whitelabel'], function() {