Minify CSS and JS in CodeIgniter Efficiently

Question

So I am working on a project using the PHP framework CodeIgniter (http://ellislab.com/codeigniter) and inside of it, we are using a lot of various CSS/JS files that are being called in our header include.

I've used the Minify tool before on WordPress sites and other projects, and ran across this library for CodeIgniter on GitHub (https://github.com/ericbarnes/ci-minify) and figured I would use it on my project.

It works all fine and dandy, but unfortunately I am compressing so many CSS and JS files that by the time the page loads, it would have been quicker if I hadn't used it.

Here's what the code looks like in my controller:

    // minify css
    $cssfiles = array('assets/css/normalize.css', 'assets/css/hook-new.css', 'assets/css/hook.css', 'assets/css/components.css', 'assets/css/rtl.css', 'assets/css/global.css', 'assets/css/body.css', 'assets/css/mediaqueries.css', 'assets/select2-3.4.3/select2.css', 'assets/jquery_bootstrap/css/custom-theme/jquery-ui-1.9.2.custom.css');
    $cssfile = $this->minify->combine_files($cssfiles);
    $csscontents = $this->minify->css->min($cssfile);
    $this->minify->save_file($csscontents, 'assets/css/all.css');

    // minify js
    $jsfiles = array('assets/js/application/js_config.js', 'assets/js/bootstrap.min.js', 'assets/js/custom.js', 'assets/select2-3.4.3/select2.js', 'assets/js/startup.js', 'assets/ckeditor/ckeditor.js', 'assets/js/jquery.validationEngine-en.js', 'assets/js/jquery.validationEngine.js', 'assets/js/scripts.js', 'assets/js/application/js_timer.js');
    $jsfile = $this->minify->combine_files($jsfiles);
    $jscontents = $this->minify->js->min($jsfile);
    $this->minify->save_file($jscontents, 'assets/js/all.js');

So I'm taking these large arrays of CSS and JS files, compressing them, then saving them to one large file. But is there a better and more efficient way of doing this?

I know I could combine them by hand, but then when I am working on things, I have massive files to sift through. Not only that, but I like Minify's ability to get rid of unnecessary white space and really condense the code.

So any thoughts on how I can efficiently accomplish this?

Thanks!

Answer 1

I used Grunt.js for my codeigniter project to :

1. Concat js and css files into one file like app.css and app.js
2. Minify final css and js files

After installing Node.js in your development machine (Linux , windows or mac) you can install grunt and grunt-cli using npm ( read Gruntjs document )

Then you can use this plugins on grunt :

1. grunt-contrib-concat for concat css and js files into one file
2. grunt-contrib-cssmin for minify css files
3. grunt-contrib-uglify for minify js files

Then you can create Tasks for concating and minifying css and js files and Finally sync with server .

That's it

Answer 2

Dude....grunt. it will save your life. Watch your sass/can/js files for changes and auto minify and concat into one js and one css file. It's amazing how much it will improve your load time and how easy it is.

Answer 3

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") );.

Answer 4

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

Answer 5

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"
}

Answer 6

All I could think of to do is minify them, not necessarily by hand, but manually so that the website does not have to process them.

The upside: Your site does not have to do this process now, it only has to load one big, already minified file.

The downside: Whenever you want to make edits to the code, you either have to do so in the giant, minified file, or make changes to your previous file, and then re-minify everything again.

If the pros outway the cons of this method for you, use something like (but not necessarily) http://cssminifier.com/

There are a million minifiers out there to choose from. A simple google search should yield these results.