The Less compiler has two options for compressing and minimizing. The first option (-x
or --compress
) removes some whitespaces, and the second option (--clean-css
) uses clean-css
, which you can access at https://github.com/GoalSmashers/clean-css. Note that you cannot use both the options together.
The only requirement for this recipe is to have the Less plugin installed and loaded in your Gruntfile.js
file. You can check the Installing Grunt plugins and Adding the Less compiler task recipes of this chapter to find out how to install this plugin.
Open the Gruntfile.js
file that contains your Less task configuration. Edit the grunt-contrib-less
options to set the compress
or clean-css
to true
, as follows:
less: { dev: { files: { "<%= app.dev %>/css/app.css": "<%= app.dev %>/less/app.less" } options: { cleancss: true } }
Cleaning and compressing your final CSS is important to load the website...