Grunt cssmin 重新设置相对 URI？答案

【问题标题】：Grunt cssmin rebasing a relative URI?Grunt cssmin 重新设置相对 URI？
【发布时间】：2014-02-04 21:25:01
【问题描述】：

我目前正在为我们的项目设置 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 文件夹。我尝试使用cssmin 任务的target 和root 选项，但无济于事。有人可以为我指出此任务的正确配置或另一个可以实现我正在寻找的 Grunt 任务吗？

提前致谢！

【问题讨论】：

如果我是你，我会保留文件夹结构和其中的图像，因为如果“image1”和“image2”具有相同的名称，您很容易遇到问题。要保留结构并将其复制到 dist 文件夹中，您可以使用 grunt-contrib-copy
@Lucho 这是一个很好的观点。感谢您的评论！

标签： gruntjs grunt-usemin

【解决方案1】：

我在C:\web\project 中有一个 grunt 文件，在 C:\web\project\www\css 中有一个 CSS 文件。以下 sn-p 来自我的 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 来比较一下吗？

相关阅读：https://stackoverflow.com/a/21415649/99256

【讨论】：

【解决方案2】：

查看 cssmin 文档/选项：

rebase：设置为 false 以跳过 URL rebase

这解决了问题。

【讨论】：