有效地缩小CodeIgniter中的CSS和JS

Question

所以我正在使用PHP框架CodeIgniter(http://ellislab.com/codeigniter)开发一个项目,在其中,我们使用了很多各种CSS/JS文件,这些文件在我们的头文件中被调用.

我之前在WordPress网站和其他项目上使用了Minify工具,并在GitHub上运行了这个库以获取CodeIgniter(https://github.com/ericbarnes/ci-minify),并且我想在我的项目中使用它.

它工作得很好,但很遗憾,我正在压缩如此多的CSS和JS文件,当页面加载时,如果我没有使用它会更快.

这是代码在我的控制器中的样子:

    // 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');

所以我正在使用这些大量的CSS和JS文件,压缩它们,然后将它们保存到一个大文件中.但有没有更好,更有效的方法呢？

我知道我可以手工合并它们,但是当我处理事情时,我会有大量文件来筛选.不仅如此,我还喜欢Minify能够摆脱不必要的空白并真正压缩代码.

那么关于如何有效地实现这一目标的任何想法？

谢谢!

Answer 1

为什么不使用Grunt？您可以设置一些任务来连接和缩小JavaScript文件.我自己为CodeIgniter项目完成了这项工作并且运行良好.这是一个教程.

Grunt是一个基于Node.js的工具,但由于你在开发机器上进行构建,这不应该是一个问题 - 你不需要在服务器上安装Node.我们的想法是,在提交更改之前,您运行构建任务,该任务会连接并缩小您的JavaScript和CSS.然后你的提交包括缩小的文件,然后将它们推送到服务器.

这是我用于CodeIgniter项目的Gruntfile:

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']);
};

和package.json文件:

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