Search code examples
gulpgulp-watch

Gulp watch for css doesn't work


My gulp watch doesn't work for css. I have the following config:

var config = {
    port : 9007,
    devBaseUrl : "http://localhost",
    paths : {
        html : "./src/*.html",
        js : "./src/**/*.js",
        images : './src/images/*',
        css : [
          'node_modules/bootstrap/dist/css/bootstrap.min.css',
          'node_modules/bootstrap/dist/css/bootstrap-theme.min.css',
          'node_modules/toastr/package/toastr.css',
            "src/css/main.css"

        ],
        dist : './dist',
        mainJS : './src/main.js'
    }
};

My gulp css task is:

gulp.task('css', function() {
    gulp.src(config.paths.css)
        .pipe(concat('bundle.css'))
        .pipe(gulp.dest(config.paths.dist + '/css'));
});

And my watch task is:

gulp.task('watch', function() {
    gulp.watch(config.paths.html, ['html']);
    gulp.watch(config.paths.js, ['js', 'lint']);
    gulp.watch(config.paths.css, ['css']);
});

The rest works without problems. It is probably something small that I do not see.

EDIT

Structure

I tried also to change paths to :

'./node_modules/bootstrap/dist/css/bootstrap.min.css',
'./node_modules/bootstrap/dist/css/bootstrap-theme.min.css',
'./node_modules/toastr/package/toastr.css',
'./src/css/*.css'

And connect task is :

gulp.task('connect', function(){
    connect.server({
        root : ['dist'],
        port : config.port,
        base : config.devBaseUrl,
        livereload : true
    })
});

Solution

  • I solved it. I only changed the css task to :

    gulp.task('css', function() {
        gulp.src(config.paths.css)
            .pipe(concat('bundle.css'))
            .pipe(gulp.dest(config.paths.dist + '/css'));
            .pipe(connect.reload());
    });
    

    And t worked like a charm.