在CodeIgniter中有效地缩小CSS和JS。

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.

因此，我正在开发一个使用PHP框架CodeIgniter (http://ellislab.com/codeigniter)的项目，在这个项目中，我们使用了很多CSS/JS文件，这些文件在我们的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.

我以前在WordPress站点和其他项目上使用过Minify工具，并在GitHub上为CodeIgniter (https://github.com/ericbarnes/ci-minify)运行过这个库，并认为我可以在我的项目中使用它。

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.

它工作得很好，但不幸的是，我压缩了这么多CSS和JS文件，当页面加载时，如果我没有使用它，它会更快。

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?

所以我要把这些CSS和JS文件的大数组压缩，然后把它们保存到一个大文件中。但是有更好更有效的方法吗?

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.

我知道我可以手工合并它们，但是当我在处理一些东西时，我有大量的文件要筛选。不仅如此，我还喜欢Minify去除不必要的空白并真正压缩代码的能力。

So any thoughts on how I can efficiently accomplish this?

有什么想法吗?

Thanks!

谢谢!

7 个解决方案

#1

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.

为什么不使用繁重吗?您可以设置一些任务来连接和缩小JavaScript文件。我自己为一个CodeIgniter项目做过这个，它运行得很好。这里有一个教程。

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.

呼噜声是一个节点。基于jms的工具，但是由于您要在您的开发机器上进行构建，所以这应该不是问题——您不需要在服务器上有节点。其思想是在提交更改之前，运行构建任务，该任务将连接和缩小JavaScript和CSS。然后提交包含了缩小的文件，并将它们推到服务器上。

Here's a Gruntfile I used for my CodeIgniter project:

这是我在CodeIgniter项目中使用的一个垃圾文件:

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:

和包。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"
}

#2

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.

我的个人解决方案，因为我使用git和hook事件，将会有一个php控制器渲染这个css和js文件在推和拉。这意味着，当您应用新的数据时，一个钩子将执行这个php脚本并重新运行该文件一次。

In the hook bash script, run something like php /var/www/index.php tool/minify to run the controller's script.

在hook bash脚本中，运行类似php /var/www/ index等内容。php工具/缩小以运行控制器的脚本。

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.

似乎是一个更理想的解决方案，因为服务器只在实际需要时才这样做。如果需要在动态测试中进行一些操作，只需在手动更新css或js文件时通过控制器运行一次呈现缩小文件即可。

• git hooks
• git钩子

#3

I had the same issue, needed a JS/CSS minifier that 1) works together with my template parser, 2) always includes some core minified files and 3) have the option to add extra minified files if necessary.

我也有同样的问题，需要一个JS/CSS缩小器1)与我的模板解析器一起工作，2)总是包含一些核心的缩小文件，3)如果需要，可以添加额外的缩小文件。

The solution: https://github.com/robinwo/codeigniter-templates-minify (build upon https://github.com/slav123/CodeIgniter-minify).

解决方案:https://github.com/robinwo/codeigniter- templat-minify(构建在https://github.com/slav123/CodeIgniter-minify之上)。

File are minified on the fly, and only once (unless you force a refresh).

文件被动态地缩小，并且只有一次(除非强制刷新)。

#4

Just completed this library for my new website. I put it on Github, it may helps.

刚刚为我的新网站完成了这个图书馆。我把它放在Github上，可能会有帮助。

A HTML / CSS / Javascript Minification Library

一个HTML / CSS / Javascript缩小库

https://github.com/terrylinooo/CodeIgniter-Minifier

https://github.com/terrylinooo/CodeIgniter-Minifier

#5

Here's something you might be interested in, I have written this minifying (uglifying) library based on Matthias Mullie work on minifier.

这里有一些你可能感兴趣的东西，我写了这个缩小(丑化)库，基于Matthias Mullie关于缩小的工作。

---

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:

要安装这个类，只需将src文件夹内容从github repo上传到应用程序/库。然后使用CodeIgniter的libarary加载器加载类:

$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") );.
  • $ this - >丑陋- > group_add(数组(file1 file2 "," file2 "));。

• You can also pass resources at the group_start method:

  您还可以通过group_start方法传递资源:

  • $this->ugly->group_start( array("file1","file2","file2") );.
  • $ this - >丑陋- > group_start(数组(file1 file2 "," file2 "));。

#6

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.

伙计....咕哝。它会救你的命。查看您的sass/can/js文件，以获得更改，并自动将其缩小并转换为一个js和一个css文件。它可以大大提高你的加载时间，而且非常容易。

#7

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/

如果优点超过了这个方法的缺点，可以使用http://cssminifier.com/之类的(但不一定)

There are a million minifiers out there to choose from. A simple google search should yield these results.

有上百万个迷你玩具可供选择。简单的谷歌搜索应该会得到这些结果。