Minify less file with Gulp

Today we will learn about how to minify a less file with the gulp.js . As we know to write css in Less is very simple, logical and fun so with help of Gulp we can compile a Less file to a regular css file as well as minify that css file at a time. With this process we do not need to convert the css file to minify css file later instead when you write code in less it minifies that less file at that time means when you change anything in the less file suddenly it minifies the less file.

First you need to install clean-css gulp plugin to minify css by npm And you can also read about “clean-css” plugin from here – https://www.npmjs.com/package/gulp-clean-css

Install Command –

npm install gulp-clean-css --save-dev

then you have write some clean-css code in your gulpfile.js file .

 

Then run the gulp command to run the gulp task

Command –

npm run gulp

• After run the gulp command it run the watch task to check any changes in the test.less file.
• If any changes happen in the test.less file then it compile the less file to the regular CSS file in the css folder
• Then it minifies that CSS file and save at the css-min folder.