我正在寻找与 Gulp 一起使用的插件链,它提供:
- 源地图支持
- 较少的
- 缩小
- 级联
- URL 替换(rebase)以解决重定位/连接问题
我目前拥有前四个,但我找不到现有插件的组合也可以给我最后一个(URL 变基)。我没有找到任何发出源映射的 URL 变基插件。
为了清楚起见,我的问题是,当我从项目开发文件夹中编译多个小 CSS 文件并将它们输出到一个公共文件夹中时,连接导致的移动会破坏相对 URL,例如背景图像的 URL。
编辑:
听起来我目前使用的工具链已经打算解决这个问题。所以,这表面上是答案。但是,这引发了另一个问题,即所需的语法应该如何工作。
这个问题理论上有很多重复的地方:
- clean-css #152:变基功能非常令人沮丧
- clean-css #195:
root
Windows 上的选项 - clean-css #263: 如何让 relativeTo 选项在不同路径中处理 CSS 文件
- http://adilapapaya.com/docs/clean-css/#howtorebaserelativeimageurls
- Grunt cssmin 重新设置相对 URI?
不幸的是,没有答案能真正解释语法,他们只是演示了伏都教;所以我不知道为什么以下不起作用。如果我能解决它,我会回到这里并标记它已接受,以表明该工具链确实可以满足我的需要。
源文件:
/assets
/site
styleInput1.less "url(../site/logo.png)"
logo.png
background.png
/application
styleInput2.less "url(../site/background.png)"
吞咽任务:
gulp.task(filename, function () {
return gulp.src(files)
.pipe(sourcemaps.init())
.pipe(less())
.pipe(minifyCss({ relativeTo: './compiled' }))
.pipe(concat(filename))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./compiled'));
});
输出,带有损坏的 URL。注意多个缺陷。尽管 CSS 相对于所需资产提升了一个目录级别,但已添加了一个额外的父目录 (!)。此外,其中一个 URL 的硬资产文件夹名称已更改 (!)。很奇怪:
/compiled
styleOutput1.css "url(../../compiled/logo.png)"
styleOutput2.css "url(../../site/background.png)"
我很抱歉继续伏都教,但这是我的工作吞咽管:
.pipe(minifyCss({ relativeTo: './compiled', target: './compiled' }))
和正确的输出:
/compiled
styleOutput1.css "url(../assets/site/logo.png)"
styleOutput2.css "url(../assets/site/background.png)"