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!
To minify CSS, try CSSNano and csso. To minify JavaScript, try UglifyJS. The Closure Compiler is also very effective. You can create a build process that uses these tools to minify and rename the development files and save them to a production directory.
Minifying strips out all comments, superfluous white space and shortens variable names. It thus reduces download time for your JavaScript files as they are (usually) a lot smaller in filesize. So, yes it does improve performance.
It loads usually faster because minified CSS/JS file is simply smaller in size, so it takes less to download and process.
Uglification improves performance while reducing readability. Encryption: This is the process of translating data, called plain data, into encoded data. This encrypted, or encoded, data is known as ciphertext, and needs a secret key in order to decrypt it.
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"
}
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With