logo标签列表

在CodeIgniter中高效压缩CSS和JS

javascriptphpcsscodeigniterminify
12

我正在使用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能够去除不必要的空格并真正压缩代码。

你有什么关于如何高效完成这个任务的想法吗？

谢谢！

2
你应该只压缩一次文件，然后将压缩文件放在服务器上。每次请求时都进行文件压缩是不明智的做法。这当然会很慢。 - Spudley
我不认为这很疯狂。我可以一次性对它们进行缩小，但如果我更改了“body.css”和“mediaqueries.css”呢？那么我就必须重新缩小文件。那样的话，我就必须进入这个庞大的缩小后的.CSS文件，并查找我要找的行。 - Keenan Payne
@KeenanPayne 我使用我之前提到的 Grunt 配置，即使在我的 5 年多岁的 MacBook 上，也不需要几秒钟就可以压缩和合并所有的 CSS 和 JavaScript。你甚至可以使用 grunt-contrib-watch（https://github.com/gruntjs/grunt-contrib-watch）设置监视某些文件，并在它们自动更改时运行构建任务。 - Matthew Daly
6个回答
19

为什么不使用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"
}
那么如果我的网站运行在Apache服务器上，这不应该是一个问题吧？我如何在没有NodeJS的情况下安装NPM（按照您提供的链接教程）？ - Imnotapotato
1
你永远不会在服务器上运行它。你需要在本地安装Node.js、NPM和Grunt，并在本地运行它，然后将更改提交到版本控制并推送到服务器。使用的服务器是无关紧要的。 - Matthew Daly
只是为了确保我理解，因为我只有基本的nodejs知识 - 我在我的本地服务器上安装nodejs、npm和grunt，在我的网站css/js文件上工作，完成后 - 我运行grunt在我的css和js文件上 - 然后提交只生成的文件？（我猜它会生成一个文件）。 - Imnotapotato
不需要。您可以在本地计算机上（例如笔记本电脑或台式机）安装Node.js、NPM和Grunt。您应该提交源文件和生成的文件。 - Matthew Daly
1

这里有一些你可能感兴趣的内容，我写了一个基于Matthias Mullie在minifier上工作的缩小（丑化）库this。

库：CodeIgniter Uglify

安装

要安装这个类，只需将github repo中的src文件夹内容上传到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") );`
很棒，看起来很有用。 - Goddard
1

伙计们...grunt。它可以拯救你的生命。监视你的sass/can/js文件的更改并自动缩小和合并为一个js和一个css文件。这将显着提高加载时间并使操作变得轻松。

1
我的个人解决方案是使用git和hook事件，通过一个php控制器在push和pull时渲染css和js文件。这意味着当您应用新数据时，钩子执行此php脚本并重新渲染该文件一次。
在钩子bash脚本中，运行类似于php /var/www/index.php tool/minify的命令来运行控制器的脚本。
这似乎是更理想的解决方案，因为服务器只在实际需要时才执行此操作。如果您需要进行即时测试，只需手动更新css或js文件后通过控制器运行一次渲染压缩文件即可。
0

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

  1. 将 js 和 css 文件合并为一个文件，如 app.css 和 app.js
  2. 压缩最终的 css 和 js 文件

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

然后，您可以在 grunt 上使用这些插件：

  1. 使用grunt-contrib-concat将CSS和JS文件合并为一个文件
  2. 使用grunt-contrib-cssmin压缩CSS文件
  3. 使用grunt-contrib-uglify压缩JS文件

然后，您可以创建任务来合并和压缩CSS和JS文件，并最终与服务器同步。

就是这样

-5

我所能想到的做法就是将它们压缩，不一定要手动操作，但需要手动进行操作，以便网站不必处理它们。

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

坏处：每当您想要编辑代码时，您要么必须在巨大的、被压缩的文件中进行编辑，要么对先前的文件进行更改，然后重新压缩所有内容。

如果这种方法的优点超过了缺点，那么可以使用类似于（但不一定是）http://cssminifier.com/的工具。

有数百万个压缩工具可供选择。简单的谷歌搜索应该会得出这些结果。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接