12

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

我之前在 WordPress 网站和其他项目上使用过 Minify 工具，并在 GitHub 上为 CodeIgniter 运行过这个库（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 消除不必要的空白并真正压缩代码的能力。

那么关于我如何有效地实现这一点有什么想法吗？

谢谢！

4

6 回答 6

17

为什么不使用咕噜声？您可以设置一些任务来连接和缩小 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"
}
于 2013-10-29T15:25:46.180 回答
1

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

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

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

于 2013-10-29T15:33:10.970 回答
1

哥们……咕哝。它会挽救你的生命。观察你的 sass/can/js 文件的变化，并自动缩小并合并成一个 js 和一个 css 文件。令人惊讶的是，它会在多大程度上缩短您的加载时间以及它是多么容易。

于 2016-08-24T21:41:01.537 回答
1

这是您可能感兴趣的内容，我已经根据Matthias Mullie在minifier上的工作编写了这个缩小（丑化）库。

库：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") );.
于 2016-07-08T20:14:17.623 回答
0

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

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

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

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

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

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

而已

于 2019-07-24T18:13:20.330 回答
-5

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

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

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

如果优点对您来说这种方法的缺点，请使用（但不一定）http://cssminifier.com/

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

于 2013-10-29T15:03:29.107 回答