Grunt: CSS Minification

We will make use of the grunt-contrib-cssmin plugin to minify CSS files.

To install this plugin, navigate to your project's directory and type the below command in the terminal

grunt css minify 
				npm install grunt-contrib-cssmin --save-dev

The devDependencies field of the package.json file will now have a new listing - grunt-contrib-cssmin

				
				  "devDependencies": {
				    "grunt": "^0.4.5",
				    "grunt-contrib-cssmin": "^0.14.0"
				  }

CSS Minification: Single File

We will minify the style.css file inside the src/css directory and output the minified style.min.css file into the dist/css directory. Configuration for this minification task inside the grunt.initConfig() method follows the structure shown below

					
					module.exports = function(grunt) {
						grunt.initConfig({
							pkg: grunt.file.readJSON('package.json'),
							cssmin: {
								css: {
									src: 'src/css/style.css',
									dest: 'dist/css/style.min.css'
								}
							}
						});	
					}

After configuration, the grunt-contrib-cssmin npm plugin needs to be loaded. For this, we pass the plugin name as an argument to the grunt.loadNpmTasks() method and call the method

					
					module.exports = function(grunt) {
						grunt.initConfig({
							pkg: grunt.file.readJSON('package.json'),
							cssmin: {
								css: {
									src: 'src/css/style.css',
									dest: 'dist/css/style.min.css'
								}
							}
						});	

						grunt.loadNpmTasks('grunt-contrib-cssmin');	
					}

The minification task can now be run typing the command

					grunt cssmin

But a task, or a set of tasks, can be run together under an "alias task". The grunt.registerTask function serves this purpose. The first argument is the task name. In the example below, we define a default task name. The second argument is an array of tasks to run. We add our minification task (cssmin) into this array. Gruntfile.js now has the structure

					
					module.exports = function(grunt) {
						grunt.initConfig({
							pkg: grunt.file.readJSON('package.json'),
							cssmin: {
								css: {
									src: 'src/css/style.css',
									dest: 'dist/css/style.min.css'
								}
							}
						});	

						grunt.loadNpmTasks('grunt-contrib-cssmin');
						grunt.registerTask('default', ['cssmin']);
					}

The default task defined can be run just by typing grunt into the terminal without specifying a particular task. In our case, the below command will run the cssmin task

					grunt

CSS Minification: Multiple Files

A minor modification inside the grunt.initConfig method will allow us to minify multiple CSS files. The configuration shown below minifies style.css and home.css files inside the src/css directory and outputs the minified files into the dist/css directory

					
					module.exports = function(grunt) {
						grunt.initConfig({
							pkg: grunt.file.readJSON('package.json'),
							cssmin: {
								dist:{
									files: {
										'dist/css/style.min.css':'src/css/style.css',
										'dist/css/home.min.css':'src/css/home.css'
									}
								}
							}
						});	

						grunt.loadNpmTasks('grunt-contrib-cssmin');
						grunt.registerTask('default', ['cssmin']);
					}