现在打算将第三方的 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
之外,还有更好的方法吗?
1
gouflv 2014-09-11 09:53:47 +08:00 1
手动拷贝? 你需要一个自动化工具--gruntjs
|
3
humiaozuzu 2014-09-11 10:02:00 +08:00
@hustlzp 可以试试 baidu 的 fis,grunt 和 gulp 做到生产环境可用要折腾死。
|
4
hustlzp OP @humiaozuzu 好东西啊!你用过没?体验如何?
|
5
humiaozuzu 2014-09-11 10:09:22 +08:00 1
@hustlzp 用过,简单配置就能满足生产环境需求了,比 grunt 和 gulp 好多了。
|
6
yangg 2014-09-11 11:44:08 +08:00 via Android 1
自动话,可以把CSs里的资源替换为绝对路径
|
8
rankjie 2014-09-11 12:36:19 +08:00 via iPhone
@humiaozuzu grunt和gulp难道不就是给你在开发环境用的么,你生产环境难道还要每次更新代码后再编译处理一次?还是说你的生产环境也用grunt来启动服务?吓die
|
9
bcxx 2014-09-11 13:05:50 +08:00 1
用 usemin + autover (忘记是不是这个名字了)
usemin 就是把路径改写的 autover 就是给资源打 tag 的,打完后会生成一个 map json ,程序里通过这个东东来解析实际资源文件即可(这个和 fis 提供的功能差不多) |
10
spritevan 2014-09-11 13:11:46 +08:00 1
从 componentjs 转到 duojs
|
12
skywalker 2014-09-11 14:51:11 +08:00
webpack
我用过的觉得最靠谱的方案 |
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 |
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. |