Gulp smoosher task runs fine on gulp init but won't update when running

Question

Im using the gulp smoosher to inject content from a CSS file inline into a copy of my index.html file.

This is working fine upon gulp init, however when running I cant get the task to trigger / generate any updates from updating my CSS file.

I'm currently trying with the following:

var gulp = require('gulp');
var autoprefix = require('gulp-autoprefixer');
var smoosher = require('gulp-smoosher');

var cssDir = 'assets/src/css';
var cssTargetDir = 'assets/build/css';
var htmlSrcDir = 'assets/src';

gulp.task('css', function() {
  gulp.src(cssDir + '/**/*.css')
    .pipe(autoprefix({
            browsers: ['last 40 versions'],
            cascade: false
        }))
    .pipe(gulp.dest(cssTargetDir));
});

gulp.task('smoosher', ['css'], function () {
    gulp.src(htmlSrcDir + '/index.html')
        .pipe(smoosher({
            base: 'assets/build/' //target and inject from build CSS
        }))
        .pipe(gulp.dest('')); //root
});

gulp.task('watch', function(){
    gulp.watch(cssDir + '/*.css', ['css']);
    gulp.watch(htmlSrcDir + '/index.html', ['smoosher']);
})

gulp.task('default', [
    'css',
    'smoosher',
    'watch'
]);

Answer 1

you should change the watch for smoosher to watch for css files and not for index.html

Remember to watch for the source of the change and not the end result

gulp.task('watch', function(){
    gulp.watch(cssDir + '/*.css', ['css']);
    gulp.watch(cssDir + '/*.css', ['smoosher']);
})