Gulp任务没有按预期工作

时间:2017-05-24 01:05:25

标签: javascript sass gulp gulp-watch gulp-sass

我有两项任务:

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

我的问题是,当我按顺序在我的默认任务上运行时,css文件被复制但是sass任务没有生成它所接受的css。但是,如果我运行一个任务而不是另一个任务,则生成css文件。

我错过了什么?

Whitelabel任务

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

1 个答案:

答案 0 :(得分:1)

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

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

或者你可以制作白色标签'通过

来完成sass任务的依赖
gulp.task('sass', ['whitelabel'], function() {