CSS & JS concatenation and minification

Combine and minify your CSS and JS contents. Benefit of combining contents is that the browser will make one request to the server instead of many. While minification reduces the size the file.

There are various tools for combining and minification of contents. PHP Laravel framework comes with built in tool for combining and minification of assets. While you can use GruntJS with CodeIgniter.

GruntJS is a NodeJS tool so you have to install it with NodeJS package manager NPM. To use GruntJS, you will need to follow the following steps.

• Open your command line tool and install npm by running the following commands

install npm

• Then install GRUNT by running the following command

install -g grunt-cli

• After successful installation, go to your project root directory

cd {project_root_directory_name}

• Create gruntfile and package.json files

touch package.json Gruntfile.js

• Initialize grunt

npm init

• Install grunt plugins

npm install grunt --save-dev
npm install grunt-contrib-concat --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-cssmin –save

• See grunt packages in package.json file

{
  "name": "project name",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "grunt": "~0.4.5",
    "grunt-cli": "~0.1.13",
    "grunt-contrib-concat": "~0.5.0"
  },
  "devDependencies": {
    "grunt-contrib-concat": "~0.5.0",
    "grunt-contrib-uglify": "~0.7.0",
    "grunt-contrib-cssmin": "~0.11.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "author": "name of author",
  "license": "BSD-2-Clause"
}

• Finally see the grunt task runner in Gruntjs file

/*
 * grunt-cli
 * http://gruntjs.com/
 *
 * Copyright (c) 2012 Tyler Kellen, contributors
 * Licensed under the MIT license.
 * https://github.com/gruntjs/grunt-init/blob/master/LICENSE-MIT
 */
 
'use strict';
 
module.exports = function(grunt) {
 
    grunt.initConfig({
        concat: {
            css: {
                src: ['assets/css/bootstrap.min.css', 
      'assets/css/styles.css'],
                dest: 'assets/css/main.css'
              },
 
            js: {
                src: ['assets/css/bootstrap.min.js', 
      'assets/css/script.js'],
                dest: 'assets/js/main.js'
              }
            },
        uglify: {
            js: {
                src: 'assets/js/main.js',
                dest: 'assets/js/main.min.js'
                }
            },
        cssmin: {
            css: {
                src: 'assets/css/main.css',
                dest: 'assets/css/main.min.css'
                }
            }
        });
 
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.registerTask('build', ['concat', 'uglify', 'cssmin']);
};

You can modify the above file according to your requirements.

For concatenation run: grunt concat
For js minification run: grunt uglify
For css minification run: grunt cssmin
You can also build all at once by running: grunt build