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重新定位到外部文件夹。我尝试使用cssmin任务的target和root选项，但都没有成功。请问是否有正确配置此任务或另一个Grunt任务可以实现我要求的功能？

先感谢了！

- thomaux

---

如果我是你，我会保留文件夹结构和其中的图片，因为如果“image1”和“image2”具有相同的名称，你很容易遇到问题。要保留结构并将其仅复制到dist文件夹中，您可以使用grunt-contrib-copy。 - Lachezar

@Lucho 非常好的观点。谢谢您的评论！ - thomaux

Answer 1

我在C:\web\project中有一个grunt文件，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以进行比较吗？

相关阅读：https://dev59.com/RmIj5IYBdhLWcg3w95rA#21415649

- MartyIX

Answer 2

请查看cssmin文档/选项：

• rebase：将其设置为false以跳过URL重定位

这解决了问题。

- biojazzard