Minify CSS and JS in CodeIgniter Efficiently

Here's something you might be interested in, I have written this minifying (uglifying) library based on Matthias Mullie work on minifier.

---

Library: CodeIgniter Uglify

Installation

To install this class, simply upload the src folder contents from github repo to application/libraries. Then load the class using CodeIgniter's libarary loader:

$this->load->library("ugly/ugly");

Usage Examples:

// minifying single string of code
// or single file
$result = $this->ugly->css("code goes here");
$result = $this->ugly->js("code goes here")
$result = $this->ugly->js("path/to/file")

// minifying multiple strings or files
$this->ugly->group_start("js");
// or $this->ugly->group_start("css");
$this->ugly->group_add("path/to/file");
$this->ugly->group_add("some code as string");
$result = $this->ugly->group_end();

Now you can save the result in a new file, or echo it, or whatever you want.

Notes:

• You can also pass an array of files:

  • $this->ugly->group_add( array("file1","file2","file2") );.

• You can also pass resources at the group_start method:

  • $this->ugly->group_start( array("file1","file2","file2") );.

My personal solution since I use git and hook events, would be to have a php controller render this css and js file upon push and pull. That means, when you apply the new data, a hook executes this php script and rerender the file once.

In the hook bash script, run something like php /var/www/index.php tool/minify to run the controller's script.

Seems like a more ideal solution since the server only does this when it's actually required. If you need to do some on the fly testing, just run the render minified files once through controller when you update a css or js file manually.

• git hooks

Why not use Grunt? You could set up a few tasks to concatenate and minify the JavaScript files. I've done this myself for a CodeIgniter project and it worked well. Here's a tutorial.

Grunt is a Node.js-based tool, but since you'd be doing the build on your development machine this shouldn't be an issue - you won't need to have Node on the server. The idea is that before committing your changes, you run the build task which concatenates and minifies your JavaScript and CSS. Then your commit includes the minified files and you push them up to the server.

Here's a Gruntfile I used for my CodeIgniter project:

module.exports = function(grunt) {

    grunt.initConfig({
        concat: {
            dist: {
                src: ['static/bower_components/skeleton/stylesheets/*.css', 'static/css/style.css'],
                dest: 'static/css/main.css'
                }
            },
        uglify: {
            dist: {
                src: 'static/js/main.js',
                dest: 'static/js/main.min.js'
                }
            },
        cssmin: {
            dist: {
                src: 'static/css/main.css',
                dest: 'static/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']);
};

And the package.json file:

{
  "name": "blah",
  "version": "0.0.1",
  "description": "A project",
  "devDependencies": {
    "grunt": "~0.4.0",
    "grunt-contrib-concat": "~0.3.0",
    "grunt-contrib-copy": "~0.4.1",
    "grunt-contrib-sass": "~0.5.0",
    "grunt-contrib-compass": "~0.6.0",
    "grunt-contrib-clean": "~0.5.0",
    "grunt-contrib-htmlmin": "~0.1.3",
    "grunt-contrib-cssmin": "~0.6.2",
    "grunt-contrib-coffee": "~0.7.0",
    "grunt-contrib-jst": "~0.5.1",
    "grunt-contrib-jshint": "~0.6.4",
    "grunt-contrib-uglify": "~0.2.4",
    "grunt-contrib-requirejs": "~0.4.1",
    "grunt-contrib-connect": "~0.5.0",
    "grunt-contrib-watch": "~0.5.3",
    "grunt-contrib-csslint": "~0.1.2",
    "grunt-contrib-compress": "~0.5.2",
    "grunt-contrib-handlebars": "~0.5.11",
    "grunt-contrib-jade": "~0.8.0",
    "grunt-contrib-stylus": "~0.8.0",
    "grunt-contrib-jasmine": "~0.5.2",
    "grunt-contrib-qunit": "~0.3.0",
    "grunt-contrib-imagemin": "~0.3.0",
    "grunt-contrib-less": "~0.7.0",
    "grunt-contrib-nodeunit": "~0.2.1",
    "grunt-contrib-yuidoc": "~0.5.0",
    "grunt-contrib": "~0.8.0"
  },
  "author": "My Name",
  "license": "licensename"
}