最受欢迎

在CodeIgniter中有效地缩小CSS和JS

Minify CSS and JS in CodeIgniter Efficiently

本文关键字：CSS JS 缩小 有效地 CodeIgniter | 更新日期: 2023-09-27

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

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

谢谢！

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

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

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

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

  • git 钩子

这里有一些你可能感兴趣的东西，我写了这个基于Matthias Mullie在缩小器上的工作的缩小（丑陋）库。

<小时 />

库： 代码点火器 Uglify

安装

要安装此类，只需将src文件夹内容从 github 存储库上传到 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") ); .

伙计....咕噜。它会挽救你的生命。监视您的 sass/can/js 文件是否有更改，并自动缩小并连接成一个 js 和一个 css 文件。令人惊讶的是，它将大大改善您的加载时间以及它是多么容易。

我使用Grunt.js为我的codeigniter项目：

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

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

然后你可以在咕噜声上使用此插件：

  1. grunt-contrib-concat 用于将 CSS 和 JS 文件合并为一个文件
  2. grunt-contrib-cssmin for minify css files
  3. grunt-contrib-uglify for minify js files

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

就是这样

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

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

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

如果优点为您解决了这种方法的缺点，请使用类似（但不一定）http://cssminifier.com/

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

相关文章：
最新更新
www.56WenDa.com 2012-2023 | php问答网 | php学习