CODEWITHSUNDEEP
javascriptsassgulpgulp-watchgulp-sass
Rafael Reis
Rafael Reis

Reputation: 610

Gulp task not working as expected

I have 2 tasks:

My problem is that when I put them to run in sequence on my default task the css the files are copied but the sass task doesnt generated the css it is suposed to. But, if i run one task than the other the css file is generated.

What am I missing?

Whitelabel Task

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 Task

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

Default Task

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

Upvotes: 0

Views: 701

Answers (1)

Mark
Mark

Reputation: 180641

Your original default task does not guarantee that the tasks are run in any specific order - in fact they run in parallel.

Many people use run-sequence https://www.npmjs.com/package/run-sequence to run tasks in a specified order.

Or you could make the 'whitelabel' task a dependency of the sass task by 

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

Upvotes: 1

Related Questions