在 CodeIgniter 中有效地缩小 CSS 和 JS

Posted

技术标签:

【中文标题】在 CodeIgniter 中有效地缩小 CSS 和 JS【英文标题】：Minify CSS and JS in CodeIgniter Efficiently 【发布时间】：2013-11-08 19:21:06 【问题描述】：

所以我正在使用 php 框架 CodeIgniter (http://ellislab.com/codeigniter) 开发一个项目，在其中，我们使用了许多在我们的头文件中调用的各种 CSS/JS 文件。

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

它工作得很好而且很花哨，但不幸的是我压缩了这么多的 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 摆脱不必要的空白并真正压缩代码的能力。

那么对于如何有效地完成此任务有什么想法吗？

谢谢！

【问题讨论】：

您应该将文件压缩一次，然后将压缩文件放在您的服务器上。每次请求文件时都缩小文件简直太疯狂了。当然很慢。 看，我不认为这很疯狂。我可以将它们全部缩小，但是如果我对body.css 和mediaqueries.css 进行更改呢？然后我必须重新缩小文件。那，或者我必须进入这个巨大的缩小 .css 文件，并找到我正在寻找的行。 @KeenanPayne 我使用下面提到的 Grunt 配置，在我 5 年以上的 MacBook 上只需几秒钟就可以缩小和连接我所有的 CSS 和 javascript。您甚至可以将其设置为监视某些文件并在使用 grunt-contrib-watch (github.com/gruntjs/grunt-contrib-watch) 自动更改时运行构建任务 【参考方案1】：

我能想到的就是缩小它们，不一定是手动，而是手动，这样网站就不必处理它们。

好处：您的网站现在不必执行此过程，只需加载一个已缩小的大文件。

缺点：每当您想对代码进行编辑时，您要么必须在巨大的、缩小的文件中这样做，要么对以前的文件进行更改，然后再次重新缩小所有内容。

如果这种方法的优点对你不利，请使用类似（但不一定）http://cssminifier.com/

有一百万个缩小器可供选择。一个简单的谷歌搜索应该会产生这些结果。

【讨论】：

【参考方案2】：

为什么不使用Grunt？您可以设置一些任务来连接和缩小 JavaScript 文件。我自己为 CodeIgniter 项目完成了这项工作，并且效果很好。 Here's a tutorial.

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"

【讨论】：

所以如果我的网站在 Apache 服务器上运行，这应该不是问题？如何在没有 NodeJS 的情况下安装 NPM（按照您的链接教程）？ 你永远不会在服务器上运行它。您在本地机器上安装 Node.js、NPM 和 Grunt 并在其中运行它，然后将更改提交到版本控制并将它们推送到服务器。使用的服务器无关紧要。 只是为了确保我理解，因为我只有 nodejs 的基本知识 - 我在本地服务器上安装 nodejs、npm 和 grunt，在我的网站 css/js 文件上工作，完成后 -我在我的 css 和 js 文件上运行 grunt - 并且只提交生成的文件？ （我只是猜测它会生成一个文件）。 没有。您在本地机器（例如笔记本电脑或台式机）上安装 Node.js、NPM 和 Grunt。您应该同时提交源文件和生成的文件。【参考方案3】：

自从我使用 git 和钩子事件以来，我的个人解决方案是让一个 php 控制器在推送和拉取时呈现这个 css 和 js 文件。这意味着，当您应用新数据时，一个钩子会执行这个 php 脚本并重新渲染文件 once。

在钩子 bash 脚本中，运行 php /var/www/index.php tool/minify 之类的东西来运行控制器的脚本。

似乎是一个更理想的解决方案，因为服务器仅在实际需要时才执行此操作。如果您需要进行一些动态测试，只需在手动更新 css 或 js 文件时通过控制器运行一次渲染缩小文件。

git hooks

【讨论】：

【参考方案4】：

这里有一些你可能感兴趣的东西，我已经基于Matthias Mullie 编写了this 缩小（丑化）库minifier。

Library: CodeIgniter Uglify

安装

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

$this->load->library("ugly/ugly");

用法示例：

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

现在您可以将结果保存在一个新文件中，或回显它，或任何您想要的。

注意事项：

你也可以传递一个文件数组：

$this->ugly->group_add( array("file1","file2","file2") );。

你也可以通过group_start方法传递资源：

$this->ugly->group_start( array("file1","file2","file2") );。

【讨论】：

棒极了，看起来很有用。【参考方案5】：

老兄....咕哝。它会挽救你的生命。观察你的 sass/can/js 文件的变化，并自动缩小并合并成一个 js 和一个 css 文件。令人惊讶的是，它会大大缩短您的加载时间，而且操作如此简单。

【讨论】：

【参考方案6】：

我在我的 codeigniter 项目中使用了Grunt.js：

    将 js 和 css 文件合并到一个文件中，例如 app.css 和 app.js 缩小最终的 css 和 js 文件

在您的开发机器（Linux、windows 或 mac）上安装 Node.js 后，您可以使用 grunt 和 grunt-cli 安装 npm（阅读 Gruntjs 文档）

然后你可以在 grunt 上使用这个插件：

    grunt-contrib-concat 用于将 css 和 js 文件合并为一个文件 grunt-contrib-cssmin 用于缩小 css 文件 grunt-contrib-uglify 用于缩小 js 文件

然后您可以创建用于连接和缩小 css 和 js 文件的任务，并最终与服务器同步。

就是这样

【讨论】：

以上是关于在 CodeIgniter 中有效地缩小 CSS 和 JS的主要内容，如果未能解决你的问题，请参考以下文章

在 C# 中有效地缩小二维数组

如何在codeigniter ci中加载javascript css文件

如何在 PHP 中解析 HTML 以进行缩小？

在 .NET 环境中优雅地缩小动态生成的 javascript？ [关闭]

使用正则表达式缩小/压缩 CSS？

在 codeigniter 视图中放置 css