V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
hustlzp
V2EX  ›  程序员

[请教] 如果将第三方库的 js/css 合并压缩到单独的目录后,那么这些 js/css 相对引用的资源(比如 bootstrap.min.css 依赖 fonts/)该如何处理?除了手动拷贝之外,有没有更好的方法?

  •  
  •   hustlzp ·
    hustlzp · 2014-09-11 09:43:21 +08:00 · 5326 次点击
    这是一个创建于 3725 天前的主题,其中的信息可能已经有所发展或是发生改变。

    现在打算将第三方的 css/js 依赖合并、压缩、输出到output目录下。

    遇到一个问题,有些 js/css 会相对引用一些资源。比如 bootstrap.min.css 会依赖 fonts/,如下所示:

    bootstrap/
      dist/
        css/
          bootstrap.min.css
        fonts/
          glyphicons-halflings-regular.woff
    

    那么在合并压缩后,如何处理这些相对引用的资源?

    除了将 fonts/glyphicons-halflings-regular.woff 手动拷贝一下:

    output/
      app.css
    fonts/
      glyphicons-halflings-regular.woff
    

    之外,还有更好的方法吗?

    16 条回复    2014-09-12 13:06:13 +08:00
    gouflv
        1
    gouflv  
       2014-09-11 09:53:47 +08:00   ❤️ 1
    手动拷贝? 你需要一个自动化工具--gruntjs
    hustlzp
        2
    hustlzp  
    OP
       2014-09-11 09:58:46 +08:00
    @gouflv thx
    humiaozuzu
        3
    humiaozuzu  
       2014-09-11 10:02:00 +08:00
    @hustlzp 可以试试 baidu 的 fis,grunt 和 gulp 做到生产环境可用要折腾死。
    hustlzp
        4
    hustlzp  
    OP
       2014-09-11 10:06:54 +08:00
    @humiaozuzu 好东西啊!你用过没?体验如何?
    humiaozuzu
        5
    humiaozuzu  
       2014-09-11 10:09:22 +08:00   ❤️ 1
    @hustlzp 用过,简单配置就能满足生产环境需求了,比 grunt 和 gulp 好多了。
    yangg
        6
    yangg  
       2014-09-11 11:44:08 +08:00 via Android   ❤️ 1
    自动话,可以把CSs里的资源替换为绝对路径
    hustlzp
        7
    hustlzp  
    OP
       2014-09-11 12:09:01 +08:00
    @yangg 对啊,我怎么没想到...谢谢~!
    rankjie
        8
    rankjie  
       2014-09-11 12:36:19 +08:00 via iPhone
    @humiaozuzu grunt和gulp难道不就是给你在开发环境用的么,你生产环境难道还要每次更新代码后再编译处理一次?还是说你的生产环境也用grunt来启动服务?吓die
    bcxx
        9
    bcxx  
       2014-09-11 13:05:50 +08:00   ❤️ 1
    用 usemin + autover (忘记是不是这个名字了)

    usemin 就是把路径改写的

    autover 就是给资源打 tag 的,打完后会生成一个 map json ,程序里通过这个东东来解析实际资源文件即可(这个和 fis 提供的功能差不多)
    spritevan
        10
    spritevan  
       2014-09-11 13:11:46 +08:00   ❤️ 1
    从 componentjs 转到 duojs
    hustlzp
        11
    hustlzp  
    OP
       2014-09-11 13:16:51 +08:00
    @bcxx
    @spritevan 谢谢推荐。
    skywalker
        12
    skywalker  
       2014-09-11 14:51:11 +08:00
    webpack

    我用过的觉得最靠谱的方案
    skywalker
        13
    skywalker  
       2014-09-11 14:54:53 +08:00   ❤️ 1
    写的Webpack的一个很简单的介绍:

    http://hanjianwei.com/2014/09/10/webpack-package-manager-for-web.html

    当然更多功能要看它的文档:

    http://webpack.github.io
    hustlzp
        14
    hustlzp  
    OP
       2014-09-11 15:23:08 +08:00
    @skywalker 多谢!
    ufologist
        15
    ufologist  
       2014-09-12 09:36:28 +08:00   ❤️ 1
    如果仅是用于合并CSS及其依赖的问题, 可以考虑用 requirejs Optimizer CSS合并机制.

    使用requirejs optimizer 可以优化 css
    http://requirejs.org/docs/optimization.html#onecss
    使用方法:
    页面中只加载一个main.css, 其他依赖的css都通过 @import 方式导入
    最终发布时通过requirejs optimizer这个main.css, 会得到一个合并了所有依赖的css(正确的更新了css中的url引用)

    http://jinjiang.github.io/h5slides/demo#40 这里看见的
    * 现有的CSS压缩库多半都是针对单个文件
    * 很少针对@import语法进行文件合并
    * 很少针对url(...)的相对路径进行修正
    RequireJS Optimizer 做到了上述几点
    Optimizes CSS by inlining CSS files referenced by @import and removing comments.
    Note: The url() path fixing will always fix the paths relative to the cssIn build option path, not the out build option.
    hustlzp
        16
    hustlzp  
    OP
       2014-09-12 13:06:13 +08:00
    @ufologist 好东西!谢谢推荐!
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5278 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 08:44 · PVG 16:44 · LAX 00:44 · JFK 03:44
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.