zoukankan      html  css  js  c++  java
  • CSS 和 JS 文件合并工具

    写 CSS 和 JavaScript 的时候, 我们会遇到一个两难的局面: 要么将代码写在一个大文件, 要么将代码分成多个文件. 前者导致文件难以管理, 代码复用性差, 后者则因为需要在载入多个文件令页面性能下降. 我们期望可以将代码细分成多个模块, 而在使用的时候可以合而为一.

    本文会介绍一个 CSS 和 JS 的合并工具, 对模块化的文件进行管理.

    CSS 和 JS 合并工具的发展

    对于 CSS/JS 合并和压缩的问题, 有很多解决方案, 我所在的团队也经历了几个阶段.

    1. 网站刚刚搭建的时候, 纯属的手动合并 CSS 和 JS 文件.
    2. 因为手动易出错, 繁琐, 改为使用配置文件来管理. 当时我们用 JS Builder 和我自己写的一个叫 CSS Builder 的程序来管理, 后来同事楠乔做了一个叫 YCombo 的工具, 合并这两个工具的功能.
    3. 网站扩大, 文件多起来配置文件的管理也成为负担, 所以由 URL 作为配置, 比如: http://a|b|c.css 则合并 a.css, b.css 和 c.css 三个文件; 还通过专门的服务来寻找页面中使用的 JavaScript 并自动合并.

    无疑第三种的处理方式最完美, 开发者省心省力, 但因为需要专门的服务管理和部署策略. 对小型网站和个人网站来说, 前面提到的第二种方案更为实用. 本文会介绍一下这款叫 YCombo 的工具和对应的两个 GUI 工具.

    YCombo 介绍

    顾名思义, 它主要为了解决合并 CSS 和 JS 文件的工作, 需要依赖一个命名为 .css.seed 或者 .js.seed 的配置文件. 比如: 现在有配置文件 xxoo.js.seed, 通过 YCombo 处理后在同目录可以得到合并后的 JS 文件 xxoo.js.

    YCombo 已经发布在 Github, 需要 JRE 1.6 或以上版本支持, 执行操作如下:

    java -jar ycombo.jar [参数列表] [配置文件地址]

    对应的参数列表和相关说明请查阅 YCombo 文档.

    配置文件

    .css.seed.js.seed 支持两种特殊语法:

    • // #require "PATH"/* #require "PATH" */, 引用绝对路径的文件或者相对于本配置路径的文件.
    • // #require <PATH>/* #require <PATH> */, 引用基于 root 目录的文件.

    YCombo 会按后续遍历顺序加载配置文件, 解决依赖问题和进行去重处理. 这里是个遍历顺序的例子:

             SEED
              /
             A  B
            /   /
           C   C  D
          /   /   /
         E   E   F  G
    

    文件引入和合并的顺序如下:

    E > C > A > F > G > D > B > SEED
    
    用户界面工具

    如果前面的使用方法你看不出头绪, 没有关系. 为了方便用户使用, 我们做了两个 GUI 版本: YComboGUIJCombo.

    • YComboGUI: 是 YCombo 作者做的一个依赖 .NET framework 的版本, 可以在 Windows 系统使用. [下载]
    • JCombo: 因为有些开发没有 Windows 开发环境, 我做的一个基于 Java 的版本, 可以在所有操作系统使用. [下载]

    JCombo - CSS 和 JS 文件合并压缩工具

    后话

    我自己的网站一直使用 YCombo 来合并 JavaScript, 再通过 JavaScript 压缩和混淆. 我将 JS 拆分成 20 来个小粒度的文件 (包括 jQuery), 总文件大小 280KB, 合并后 170KB, 压缩和混淆后只剩 90KB.

    这个工具适合个人网站和小团队开发使用, 欢迎完善, 建议和反馈.

    <摘自:http://www.neoease.com/css-javascript-combo-tool/>

    没有人告诉你,生活会是这样:你工作无趣,你袋里没钱,你的爱情总是昙花一现;妈妈警告过你,会有这样的日子但她没有告诉你,世界将让你屈服。但是,别怕,有我在你身边,谁让我们是friends呢……
  • 相关阅读:
    使用createDocumentFragment的渲染数据(节省性能)
    面向对象写法模板
    面向对象this指向
    js 3D图片叠加旋转切换
    三列布局-中间固定俩边自适应-和两边固定中间自适应布局
    游戏中抽奖的算法
    c++11:lambda表达式
    c++11:模板
    c++11:左值、右值
    游戏服务器语言之争
  • 原文地址:https://www.cnblogs.com/ChandlerVer5/p/3953315.html
Copyright © 2011-2022 走看看