我目前正在为我们的项目设置grunt-usemin,但我正在运行cssmin
任务的小问题。
我们的项目依赖于一些外部库,其中一些带来了一些额外的资源(如图像或字体)。问题是这些库没有相同的文件夹结构。
这是不同文件夹结构的示例
lib
|--lib1
| |--style1.css
| +--image1.png
+--lib2
|--styles
| +--style2.css
+--images
+--image2.png
在index.html中,所有样式表都被引用并放在构建块中。因此,当执行usemin任务时,库的样式表在一个缩小的文件中连接并放入输出文件夹中。相应的资产(图像)也会复制到此输出文件夹,并在img
文件夹中逐渐复制。输出文件夹结构类似于
out
|--allstyles.min.css
|--image1.png
+--image2.png
正如您所猜测的,连接的样式表(在此示例中)具有两个不同的相对URI:
image1.png
..\images\image2.png
这导致无法找到某些图像的问题。我需要一个解决方案将所有相对URI重新绑定到out文件夹。我尝试使用target
任务的root
和cssmin
选项,但无济于事。有人能指出我对这个任务的正确配置还是另一个可以实现我正在寻找的Grunt任务?
提前致谢!
答案 0 :(得分:2)
我在C:\web\project
中有一个grunt文件,C:\web\project\www\css
中有CSS文件。以下代码段来自我的grunt文件,它正确地为我重新定义URL。
var cssFiles = [
'www/css/layout/Header.css',
'www/css/layout/Footer.css',
'www/css/vendor/chosen/chosen.css'
// ...
];
cssmin: {
concat: {
options: {
keepBreaks: true, // whether to keep line breaks (default is false)
debug: true, // set to true to get minification statistics under 'stats' property (see test/custom-test.js for examples)
noAdvanced: true, // set to true to disable advanced optimizations - selector & property merging, reduction, etc.
//relativeTo: 'http://online-domain-tools.com/'
noRebase: false, // whether to skip URLs rebasing
root: 'www'
},
nonull: true,
src: cssFiles,
dest: 'www/temp/application.css'
},
minify: {
options: {},
nonull: true,
src: ['www/temp/application.css'],
dest: 'www/temp/application.min.css'
}
},
// ...
grunt.registerTask('default', ['cssmin:concat', 'cssmin:minify']);
你可以发布你的grunt文件进行比较吗?
答案 1 :(得分:2)
查看cssmin文档/选项:
解决了这个问题。