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