Gulp watch breaks production files

Question

So, I've come across a problem where running my gulp watch task breaks my build, however; this only occurs when I edit the .scss file and gulp detects the change.

For example, the styles have been applied correctly to a specific document on my website. I start watching my assets by invoking gulp. I run gulp to invoke the default task (which builds everything correctly, concatenates my assets, etc.)

This doesn't break my production file. It isn't until I edit the file, (and gulp detects that and runs the necessary tasks again) this occurs.

This is my gulpfile

//Node dependencies 
var gulp = require('gulp'),
    minifyCSS = require('gulp-clean-css'),
    minifyJS = require('gulp-uglify'),
    rename = require('gulp-rename'),
    sass = require('gulp-sass'),
    pump = require('pump'),
    sync = require('run-sequence');

//Sass transpilation task
gulp.task('sass', function(cb) {
  pump([
    gulp.src('app/scss/*.scss'),
    sass(),
    gulp.dest('app/css')
  ], cb);
});

//Uglify CSS task
gulp.task('ugCSS', function(cb) {
  pump([
    gulp.src('app/css/*.css'),
    minifyCSS(),
    rename({
      suffix: ".min"
    }),
    gulp.dest('dist/css')
  ], cb);
});

//Uglify JS task
gulp.task('ugJS', function(cb) {
  pump([
    gulp.src('app/js/*.js'),
    minifyJS(),
    rename({
      suffix: ".min"
    }),
    gulp.dest('dist/js')
  ], cb);
});

//Watch task
gulp.task('watch', function() {
  return gulp.watch('app/scss/*.scss', ['default']);
});

//Default task to make sure everythings runs syncronously
gulp.task('default', function(callback) {
  sync('sass', 'ugCSS', 'ugJS', 'watch', callback);
});

If what I've said hasn't made sense, I'll systematically list how I invoke this problem.

1. gulp: this runs the default task (this doesnt break styling)
2. edit .scss file in ide: I want to make a change to my styling, so I edit the file, the gulp watch task detects this and returns the 'default' task again, starting the cycle all over again.
3. open browser and navigate to site to see applied styling: this is where it breaks, all of my styling has been removed, the 'gulp.dest' file for my css (that I've uglified and passed into the distribution folder) is blank.
4. gulp: cancelling previous gulp process and running it again fixes the problem. Navigating back to css file in /dist - all the styles are there.

Long story short, my styles are ONLY removed when I 'actively' edit the .scss file and the gulp watch task invokes the necessary tasks to build the file into the production folder, so the relevant documents can see those changes.

Answer 1

Being myself a newbie with gulp and having a similar issue which I solved by looking at: How to run Gulp tasks sequentially one after the other, here is something you could try:

//Sass transpilation task
gulp.task('sass', function() {
  return gulp.src('app/scss/*.scss') // return solved my problem
             .pipe(sass()/*.on('error', sass.logError)*/) // optional on error
             .pipe(dest('app/css'));
});

//Uglify CSS task
gulp.task('ugCSS', function() {
  return gulp.src('app/css/*.css')
             .pipe(minifyCSS())
             .pipe(rename({suffix: ".min"})
             .pipe(dest('dist/css'));
});

//Uglify JS task
gulp.task('ugJS', function() {
  return gulp.src('app/js/*.js')
             .pipe(minifyJS())
             .pipe(rename({suffix: ".min"})
             .pipe(dest('dist/js'));
});

//Watch task
gulp.task('watch', function() {
  return gulp.watch('app/scss/*.scss', ['default']);
});

//Default task to make sure everythings runs syncronously
gulp.task('default', function() {
  sync('sass', 'ugCSS', 'ugJS');
});