How to run gulp task on save button on .css file?

Question

I would like to run gulp task on save button on .css file to minify file. I have tried gulp.watch but it is not working.

Is there any other way to minify file on save button. Using Sitecore 9.1.1.

CLI version: 2.3.0
Local version: 4.0.2

Answer 1

I have resolved this issue.

I have found two ways to resolve this issue.

1) gulp.watch
2) Bundler & Minifier Extension

gulp.watch :

gulp.task('minify:css',async function () {
    gulp.src('./css/*.css')
        .pipe(minifyCSS())
        .pipe(gulp.dest('minified')
        );
});

gulp.task("watch",() => {
    gulp.watch("./css/*.css", gulp.series('minify:css'));
});

gulp.task('default', gulp.series('minify:css', 'watch'));

We need to click on default task on Task runner explorer to add the changes automatically in minified file.

I am using gulp version 4 so using gulp.series .If you are using gulp version 3 then you can use this code

gulp.task("watch",() => {
    gulp.watch('./css/*.css',['minify:css']);
});
    gulp.task('default', ['minify:css', 'watch']);

Instead of

gulp.task("watch",() => {
    gulp.watch("./css/*.css", gulp.series('minify:css'));
});

gulp.task('default', gulp.series('minify:css', 'watch'));

Bundler & Minifier Extension

Found extension to automatically minified file by follow the steps in the below link https://marketplace.visualstudio.com/items?itemName=MadsKristensen.BundlerMinifier

We can add this extension in our project.