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.
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'])