用于内联css import语句并解析相对url引用的命令行工具

时间:2014-05-19 10:35:28

标签: css import minify

我有一个主css文件,其中包含许多各种库的import语句,例如。

main.css内容:

@import "libs/abc/abc.css";
@import "libs/xyz-1.2.5/css/xyz.css";

这些库是自包含的,并且链接到它们自己的相对目录结构中的图像 - 这可能具有彼此完全不同的组织。

libs / abc / abc.css示例内容:

.myclass1 { background-image:url(image1.png); }

libs / xyz-1.2.5 / css / xyz.css示例内容:

.myclass2 { background-image:url(../img/image1.png); }

在我的开发环境中,我会使用main.css,然后任何问题都可以追溯到源文件。对于我的发布版本,我想在解析(重新映射/重写)其中的相对url()引用时,将main.css和inline(即expand / merge / concat / combine)转换为每个import语句(作为浏览器有效)确保创建main.all.css,将其缩小以删除注释等。给出在最终用户环境中使用的main.min.css。

即。 main.all.css内容应如下所示:

.myclass1 { background-image:url(libs/abc/image1.png); }
.myclass2 { background-image:url(libs/xyz-1.2.5/img/image1.png); }

我正在寻找一个命令行工具来做这件事,但经过一个下午的搜索后,我无法做任何事情 - 没有CLI工具,只有平台模块。我希望有一些像YUI Compressor这样的东西,我目前用它来缩小。

LESS是我找到的最接近的工具,但为了让它内联,似乎我需要在import语句中添加一个指令,如下所示,但这当然会破坏浏览器中的main.css文件。 (我已经过测试,情况确实如此)

即。 LESS似乎需要:

@import (inline) "libs/abc/abc.css";

编辑1:为了清楚起见,我不想修改/移动或复制/ libs文件夹下的任何文件或文件夹,只需链接到这些第三方模块。

0 个答案:

没有答案