Library: CodeIgniter Uglify

Question

所以我正在使用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能够摆脱不必要的空白并真正压缩代码。

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

谢谢！

Answer 1

为什么不使用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"
}

Answer 2

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

在hook bash脚本中，运行类似php /var/www/index.php tool/minify的内容来运行控制器的脚本。

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

的 git hooks

Answer 3

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

解决方案：https://github.com/robinwo/codeigniter-templates-minify（构建于https://github.com/slav123/CodeIgniter-minify）。

文件即时缩小，只有一次（除非你强行刷新）。

Answer 4

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

HTML / CSS / Javascript缩小库

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

Answer 5

以下是您可能感兴趣的内容，我根据this的Matthias Mullie工作编写了minifier缩小（uglifying）库。

Library: CodeIgniter Uglify

安装

要安装此课程，只需将src文件夹内容从github repo上传到application/libraries即可。然后使用CodeIgniter的libarary loader

加载该类

$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") );。

Answer 6

多德....咕噜。它会拯救你的生命。观察你的sass / can / js文件的变化并自动缩小并连接成一个js和一个css文件。令人惊讶的是它会增加你的加载时间以及它的容易程度。

Answer 7

我所能想到的就是缩小它们，不一定是手工制作，而是手工制作，以便网站不必处理它们。

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

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

如果专业人士为您提供此方法的缺点，请使用类似（但不一定）的内容http://cssminifier.com/

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

有效地缩小CodeIgniter中的CSS和JS

7 个答案:

Library: CodeIgniter Uglify

安装

用法示例：