javascriptgulpgulp-watchgulp-sassgulp-sourcemaps

Watch all files with gulp?


Currently i have folder stucture like below.

I have gulp sass with following

gulp.task("sass", function() {
    return gulp.src('css/main.scss') // location of main scss file name
        .pipe(sourcemaps.init()) //TODO: important, comment out this line in staging and production
        //.pipe(rename({suffix: '.min'})) // include this to rename the file to fileName.min.css
        //.pipe(minifycss()) // include this to minify the file
        .pipe(sass.sync().on('error', sass.logError))
        .pipe(sourcemaps.write()) //TODO: important, comment out this line in staging and production
        .pipe(concat("main.min.css"))
        .pipe(gulp.dest('./css'));
});

I want to watch all files with extension .scss in my root directory when there are any changes.


Solution

  • If your 'sass' task compiles it correctly, then you just need a watch task to run that task automatically.

    gulp.task('watch', function() {
        gulp.watch(['./**/*.scss'], ['sass'])
    });
    

    Make it run automatically when you run gulp by adding it to a 'default' task ....

    gulp.task('default', ['sass', 'watch'])
    

    https://gulpjs.com/