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!

You should minify the files once, and put the compressed file on your server. Minifying the files every time they're requested is just crazy. Of course it's slow. — Spudley
– Spudley, Commented Oct 29, 2013 at 16:06
See, I don't think it is crazy. I could minify them all at ones, but what if I make a change to body.css and mediaqueries.css? Then I have to re-minify the files. That, or I have to go into this massive minified .css file, and find the lines I'm looking for. — Keenan Payne
– Keenan Payne, Commented Oct 29, 2013 at 22:40
@KeenanPayne I use the Grunt config I mentioned below and it doesn't take more than a few seconds on my 5+ years old MacBook to minify and concatenate all my CSS and JavaScript. You can even set it up to watch certain files and run the build task when they change automatically using grunt-contrib-watch (github.com/gruntjs/grunt-contrib-watch) — Matthew Daly
– Matthew Daly, Commented Oct 29, 2013 at 22:50

Matthew Daly · Accepted Answer · 2013-10-29 15:37:37Z

19

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

edited Oct 29, 2013 at 15:37

answered Oct 29, 2013 at 15:25

Matthew Daly

9,5152 gold badges46 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Imnotapotato Over a year ago

So if my website runs on Apache Server, this shouldn't be a problem? How do I install the NPM without NodeJS (following your link tutorial)?

Matthew Daly Over a year ago

You never run it on the server. You install Node.js, NPM and Grunt on your local machine and run it there, then commit the changes to version control and push them up to the server. The server used is irrelevant.

Imnotapotato Over a year ago

Just to make sure I understand, because I only have the basic knowledge of nodejs - i install nodejs, npm and grunt on my local server, work on my website css/js files, and when done - I run grunt on my css and js files - and commit only the generated file? (I am just guessing it generates a file).

Matthew Daly Over a year ago

No. You install Node.js, NPM and Grunt on your local machine eg your laptop or desktop. You should commit both the source and the generated files.

Robin Castlin · Accepted Answer · 2013-10-30 09:07:19Z

1

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

edited Oct 30, 2013 at 9:07

answered Oct 29, 2013 at 15:33

Robin Castlin

11k1 gold badge30 silver badges44 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 8, 2016 at 20:14

Alex C.

4,0614 gold badges23 silver badges25 bronze badges

1 Comment

Goddard Over a year ago

awesome, looks useful.

DevNinjaJeremy · Accepted Answer · 2016-08-24 21:41:01Z

1

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.

answered Aug 24, 2016 at 21:41

DevNinjaJeremy

1281 silver badge6 bronze badges

Comments

sam · Accepted Answer · 2019-07-24 18:13:20Z

0

I used Grunt.js for my codeigniter project to :

Concat js and css files into one file like app.css and app.js
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 :

grunt-contrib-concat for concat css and js files into one file
grunt-contrib-cssmin for minify css files
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

answered Jul 24, 2019 at 18:13

sam

1,3982 gold badges22 silver badges53 bronze badges

Comments

Joel Worsham · Accepted Answer · 2013-10-29 15:03:29Z

-5

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.

answered Oct 29, 2013 at 15:03

Joel Worsham

1,1501 gold badge7 silver badges20 bronze badges

Collectives™ on Stack Overflow

Minify CSS and JS in CodeIgniter Efficiently

6 Answers 6

4 Comments

Comments

Library: CodeIgniter Uglify

Installation

Usage Examples:

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

Comments

Installation

Usage Examples:

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related