javascript 有效地缩小 CodeIgniter 中的 CSS 和 JS

Question

提问by Keenan Payne

So I am working on a project using the PHP framework CodeIgniter (http://ellislab.com/codeigniter) and inside of it, we are using a lot of various CSS/JS files that are being called in our header include.

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

I've used the Minify tool before on WordPress sites and other projects, and ran across this library for CodeIgniter on GitHub (https://github.com/ericbarnes/ci-minify) and figured I would use it on my project.

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

It works all fine and dandy, but unfortunately I am compressing so many CSS and JS files that by the time the page loads, it would have been quicker if I hadn'tused it.

它工作得很好，很花哨，但不幸的是，我正在压缩如此多的 CSS 和 JS 文件，以至于在页面加载时，如果我没有使用它，它会更快。

Here's what the code looks like in my controller:

这是我的控制器中的代码：

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

So I'm taking these large arrays of CSS and JS files, compressing them, then saving them to one large file. But is there a better and more efficient way of doing this?

所以我将这些大量的 CSS 和 JS 文件压缩，然后将它们保存到一个大文件中。但是有没有更好、更有效的方法来做到这一点？

I know I could combine them by hand, but then when I am working on things, I have massive files to sift through. Not only that, but I like Minify's ability to get rid of unnecessary white space and really condense the code.

我知道我可以手动组合它们，但是当我处理事情时，我有大量文件要筛选。不仅如此，我还喜欢 Minify 去除不必要的空白并真正压缩代码的能力。

So any thoughts on how I can efficiently accomplish this?

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

Thanks!

谢谢！

Answer 1

回答by Matthew Daly

Why not use Grunt? You could set up a few tasks to concatenate and minify the JavaScript files. I've done this myself for a CodeIgniter project and it worked well. Here's a tutorial.

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

Grunt is a Node.js-based tool, but since you'd be doing the build on your development machine this shouldn't be an issue - you won't need to have Node on the server. The idea is that before committing your changes, you run the build task which concatenates and minifies your JavaScript and CSS. Then your commit includes the minified files and you push them up to the server.

Grunt 是一个基于 Node.js 的工具，但由于您是在开发机器上进行构建，所以这应该不是问题——您不需要在服务器上安装 Node。这个想法是，在提交更改之前，您运行构建任务，该任务连接并缩小您的 JavaScript 和 CSS。然后您的提交包含缩小的文件，并将它们推送到服务器。

Here's a Gruntfile I used for my CodeIgniter project:

这是我用于我的 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']);
};

And the package.json file:

和 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

回答by Terry Lin

Just completed this library for my new website. I put it on Github, it may helps.

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

A HTML / CSS / Javascript Minification Library

一个 HTML / CSS / Javascript 缩小库

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

Answer 3

回答by Alex C.

Here's something you might be interested in, I have written thisminifying (uglifying) library based on Matthias Mulliework on minifier.

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

Library: CodeIgniter Uglify

库：CodeIgniter Uglify

Installation

安装

To install this class, simply upload the srcfolder contents from github repoto application/libraries. Then load the class using CodeIgniter's libarary loader:

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

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

Usage Examples:

用法示例：

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

Now you can save the result in a new file, or echo it, or whatever you want.

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

Notes:
You can also pass an array of files:
$this->ugly->group_add( array("file1","file2","file2") );.
You can also pass resources at the group_startmethod:
$this->ugly->group_start( array("file1","file2","file2") );.

笔记：
您还可以传递一组文件：
$this->ugly->group_add( array("file1","file2","file2") );.
您还可以在group_start方法中传递资源：
$this->ugly->group_start( array("file1","file2","file2") );.

Answer 4

回答by DevNinjaJeremy

Dude....grunt. it will save your life. Watch your sass/can/js files for changes and auto minify and concat into one js and one css file. It's amazing how much it will improve your load time and how easy it is.

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

Answer 5

回答by Robin Castlin

My personal solution since I use git and hook events, would be to have a php controller render this css and js file upon push and pull. That means, when you apply the new data, a hook executes this php script and rerender the file once.

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

In the hook bash script, run something like php /var/www/index.php tool/minifyto run the controller's script.

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

Seems like a more ideal solution since the server only does this when it's actually required. If you need to do some on the fly testing, just run the render minified files once through controller when you update a css or js file manually.

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

git hooks

git钩子

Answer 6

回答by Robin

I had the same issue, needed a JS/CSS minifier that 1) works together with my template parser, 2) always includes some core minified files and 3) have the option to add extra minified files if necessary.

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

The solution: https://github.com/robinwo/codeigniter-templates-minify(build upon https://github.com/slav123/CodeIgniter-minify).

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

File are minified on the fly, and only once (unless you force a refresh).

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

Answer 7

回答by A.N

I used Grunt.jsfor my codeigniterproject to :

我将Grunt.js用于我的codeigniter项目：

Concat jsand cssfiles into one file like app.cssand app.js
Minify final cssand jsfiles

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

After installing Node.jsin your development machine (Linux , windows or mac) you can install gruntand grunt-cliusing npm( read Gruntjs document )

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

Then you can use this plugins on grunt :

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

grunt-contrib-concatfor concat css and js files into one file
grunt-contrib-cssminfor minify css files
grunt-contrib-uglifyfor minify js files

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

Then you can create Tasks for concating and minifying css and js files and Finally sync with server .

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

That's it

而已

Answer 8

回答by Joel Worsham

All I could think of to do is minify them, not necessarily by hand, but manually so that the website does not have to process them.

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

The upside: Your site does not have to do this process now, it only has to load one big, already minified file.

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

The downside: Whenever you want to make edits to the code, you either have to do so in the giant, minified file, or make changes to your previous file, and then re-minify everything again.

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

If the pros outway the cons of this method for you, use something like (but not necessarily) http://cssminifier.com/

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

There are a million minifiers out there to choose from. A simple google search should yield these results.

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

javascript 有效地缩小 CodeIgniter 中的 CSS 和 JS

提问by Keenan Payne

回答by Matthew Daly

回答by Terry Lin

回答by Alex C.

Library: CodeIgniter Uglify

库：CodeIgniter Uglify

Installation

安装

Usage Examples:

用法示例：

回答by DevNinjaJeremy

回答by Robin Castlin

回答by Robin

回答by A.N

回答by Joel Worsham

相关推荐

最近更新

标签

javascript 有效地缩小 CodeIgniter 中的 CSS 和 JS

提问by Keenan Payne

回答by Matthew Daly

回答by Terry Lin

回答by Alex C.

Library: CodeIgniter Uglify

库：CodeIgniter Uglify

Installation

安装

Usage Examples:

用法示例：

回答by DevNinjaJeremy

回答by Robin Castlin

回答by Robin

回答by A.N

回答by Joel Worsham

相关推荐

javascript 没有边框的 iframe 并在弹出窗口中滚动

javascript 如何在 SVG 中显示文本的工具提示？

javascript window.ActiveXObject 与 IE11 的区别

javascript 使用 Jquery 单击菜单链接时添加活动类

相关推荐

最近更新

标签