admin管理员组

文章数量:1186976

So I am working on a project using the PHP framework 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 () 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!

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!

• javascript
• php
• css
• codeigniter
• minify

Share Improve this question Follow asked Oct 29, 2013 at 14:51 Keenan PayneKeenan Payne 81622 gold badges1616 silver badges3232 bronze badges 3

• 2 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 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 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 Commented Oct 29, 2013 at 22:50

Add a comment  | 

6 Answers 6

Sorted by: Reset to default 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"
}

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

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

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.

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

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.

本文标签： javascriptMinify CSS and JS in CodeIgniter EfficientlyStack Overflow