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

[hustlzp]

现在打算将第三方的 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

之外，还有更好的方法吗？

[gouflv]

手动拷贝? 你需要一个自动化工具--gruntjs

[hustlzp]

@gouflv thx

[humiaozuzu]

@hustlzp 可以试试 baidu 的 fis，grunt 和 gulp 做到生产环境可用要折腾死。

[hustlzp]

@humiaozuzu 好东西啊！你用过没？体验如何？

[humiaozuzu]

@hustlzp 用过，简单配置就能满足生产环境需求了，比 grunt 和 gulp 好多了。

[yangg]

自动话，可以把CSs里的资源替换为绝对路径

[hustlzp]

@yangg 对啊，我怎么没想到...谢谢~！

[rankjie]

@humiaozuzu grunt和gulp难道不就是给你在开发环境用的么，你生产环境难道还要每次更新代码后再编译处理一次？还是说你的生产环境也用grunt来启动服务？吓die

[bcxx]

用 usemin + autover （忘记是不是这个名字了）

usemin 就是把路径改写的

autover 就是给资源打 tag 的，打完后会生成一个 map json ，程序里通过这个东东来解析实际资源文件即可（这个和 fis 提供的功能差不多）

[spritevan]

从 componentjs 转到 duojs

[hustlzp]

@bcxx
@spritevan 谢谢推荐。

[skywalker]

webpack

我用过的觉得最靠谱的方案

[skywalker]

写的Webpack的一个很简单的介绍：

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

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

http://webpack.github.io

[hustlzp]

@skywalker 多谢！

[ufologist]

如果仅是用于合并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]

@ufologist 好东西！谢谢推荐！