在我提出问题之前,我想指出在StackOverflow上有几个类似的问题( 这里,这里,这里和这里),但是它们都没有给出一个准确的解决方案。
问题 我设置了一个工作流程,在其中Grunt将多个CSS文件合并并缩小到一个生产环境的单个文件中。
我面临的问题是,运行Grunt后字体和图像路径会中断,因为它们仍然指向其现有的相对文件路径。
例如:
在
我已经想出了两种解决此问题的方法:
1. 复制所有依赖文件,使它们相对于
2. 手动更改路径。但再次强调,使用Grunt的目的就是自动化任务!
有人知道如何解决这个问题吗?我已经浪费了将近10小时在这上面,我开始放弃了。人们声称已经在 Github问题页面 上解决了此问题,但没有人真正说明他们如何解决的。
编辑:
我查看了clean-css库源代码,发现可以向缩小器对象传递一个
编辑:
好的,我终于找到一些解释
问题 我设置了一个工作流程,在其中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文件的输出为位于 static/css/custom/homepage/
下的style.min.css
。这样会导致所有字体和图像依赖项无法找到并在浏览器中返回404状态。我已经想出了两种解决此问题的方法:
1. 复制所有依赖文件,使它们相对于
style.min.css
所在的新目录。但是这样做可能会很快变得凌乱并破坏我的项目文件结构!2. 手动更改路径。但再次强调,使用Grunt的目的就是自动化任务!
有人知道如何解决这个问题吗?我已经浪费了将近10小时在这上面,我开始放弃了。人们声称已经在 Github问题页面 上解决了此问题,但没有人真正说明他们如何解决的。
编辑:
我查看了clean-css库源代码,发现可以向缩小器对象传递一个
relativeTo
属性。我已经试过了,但还是卡住了。如果我进一步解决了这个问题,我会报告的。编辑:
好的,我终于找到一些解释
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 an output file to which rebase all URLs
这是我的 Grunt 配置文件,仅供参考:
module.exports = function(grunt) {
grunt.initConfig({
concat: {
homepage: {
src: [
'static/homepage/startup/common-files/css/icon-font.css',
'static/homepage/startup/flat-ui/bootstrap/css/bootstrap.css',
'static/homepage/startup/flat-ui/css/flat-ui.css',
'static/homepage/static/css/style.css'
],
dest: 'static/css/custom/homepage/compiled.css',
}
},
cssmin: {
homepage: {
src: 'static/css/custom/homepage/compiled.css',
dest: 'static/css/custom/homepage/style.min.css'
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks("grunt-css-url-rewrite");
grunt.registerTask('build', ['concat', 'cssmin']);
grunt.registerTask('default', ["build"]);
};
谢谢。