grunt-usemin帮我改造
<link href="/dependencies/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="/dependencies/nanoscroller/bin/css/nanoscroller.css" rel="stylesheet" />
<link href="/dependencies/dropzone/downloads/css/dropzone.css" rel="stylesheet" />
一个完美的组合和缩小的js:
<link href="scripts/8e1991c7.libraries.js" rel="stylesheet" />
在concat,cssmin和uglify之后,我有一个几乎完美的文件夹结构,除了图像和它们的位置.
这是我的问题:
所有这些供应商的css文件都包含图像位置.不好的是,他们所有人都在分享不同类型的地点.他们中的一些人在css文件夹中使用图像,而其他人在img文件夹中使用.
如何配置grunt usemin来重写所有图片网址？
在我提出这个问题之前,我想指出在StackOverflow上发布了几个 类似的 问题 ,但它们都没有为问题提供准确的解决方案.
我有一个工作流程设置,Grunt将多个css文件组合并缩小为一个文件,用于生产环境.
我面临的问题是,在运行Grunt之后,字体和图像路径会中断,因为它们仍指向现有的相对文件路径.
举个例子:
在static/homepage/startup/common-files/css/icon-font.css我有以下的CSS规则:
@font-face{font-family:Flat-UI-Icons;src:url(../fonts/Startup-Icons.eot);
在我的Gruntfile中,我指定我希望缩小的css文件的输出style.min.css位于static/css/custom/homepage/.这样做的问题是文件路径发生变化,导致无法再找到所有字体和图像依赖关系,并在浏览器中返回404状态.
我做了什么来尝试解决这个问题
我认为有两种方法可以解决这个问题:
style.min.css所在的新目录.这样做的缺点是它可能很快变得混乱并破坏我的项目文件夹结构!有人知道如何解决这个问题吗？我浪费了将近10个小时,我开始放弃了.人们声称已经在Github问题页面修复了这个问题,但是没有人真正说明他们是如何修复它的.
编辑:
我查看了clean-css库源代码,看起来你可以将relativeTo属性传递给minifier对象.我已经弄得一团糟,但我仍然被卡住了.如果我对此有所了解,我会报告回来.
编辑:
好吧,我终于找到了一些解释什么relativeTo(和其他)属性的文档.我仍然坚持我的文件结构应该是什么配置....
relativeTo - path to resolve relative @import rules and URLs
root - path to resolve absolute @import rules and rebase relative URLs
roundingPrecision - rounding precision; defaults to 2; -1 disables rounding
target - path to a folder or …我正在寻找一个与Gulp一起使用的插件链,它提供:
我目前有前四个,但我找不到现有插件的组合,它也会给我最后一个(URL rebasing).我没有找到任何发布源映射的URL rebasing插件.
为了清楚起见,我的问题是,当我从项目开发文件夹中编译多个小CSS文件并将它们输出到公共文件夹时,连接产生的移动会破坏相对URL,例如背景图像.
EDITS:
听起来我目前使用的工具链已经打算解决这个问题.所以,这表面上是答案.但是,这引发了另一个问题,即所需语法应该如何工作.
这个问题在理论上有很多重复:
rootWindows上的选项不幸的是,没有答案实际解释语法,他们只是展示伏都教; 所以我不知道为什么以下不起作用.如果我能解决它,我会回到这里并标记这个被接受,表明这个工具链确实做了我需要的.
源文件:
/assets
/site
styleInput1.less "url(../site/logo.png)"
logo.png
background.png
/application
styleInput2.less "url(../site/background.png)"
gulp任务:
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)"