Grunt cssmin重新定位相对URI？

Question

我正在为我们的项目设置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任务？

提前致谢!

Answer 1

我有一个 grunt 文件C:\web\project和 CSS 文件C:\web\project\www\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']);

你能发布你的 gruntfile 来比较一下吗？

相关阅读： /sf/answers/1499095461/