gulp stream does not generate dest files

Question

There is a bug in following gulp stream but I just couldn't find where.

var processors = [autoprefixer({ browsers: ['last 2 version']}),
                  cssnano(),];

var myjob = gulp.src(['app/css/normalize.css',
                      'app/css/org.scss'])
        .pipe(watch('app/css/org.scss', {verbose: true}))
        .pipe(gulpif('*.scss', sass()))
        .pipe(concat('org.css'))
        .pipe(postcss(processors))
        .pipe(flatten())
        .pipe(gulp.dest('dist'));

Problem: The dist/org.css is not regenerated

there must be something I'm missing here.

Answer 1

The problem is that gulp-concat doesn't push the concatenated org.css file unless it receives an end event from upstream. Since gulp-watch never emits the end event, gulp-concat just hangs indefinitely.

The solution is to simply replace gulp-concat with gulp-continuous-concat:

var continuousConcat = require('gulp-continuous-concat');

var processors = [autoprefixer({ browsers: ['last 2 version']}),
                  cssnano(),];

gulp.task('default', function() {
  return gulp.src(['app/css/normalize.css',
                   'app/css/org.scss'])
    .pipe(watch('app/css/org.scss', {verbose: true}))
    .pipe(gulpif('*.scss', sass()))
    .pipe(continuousConcat('org.css'))
    .pipe(postcss(processors))
    .pipe(flatten())
    .pipe(gulp.dest('dist'));
});