我目前正在为我们的项目设置grunt-usemin,但cssmin任务却遇到了一个小问题。

我们的项目依赖于一些外部库,其中一些库带来了很多额外的资源(例如图像或字体)。问题在于这些库没有相同的文件夹结构。

这是不同文件夹结构的示例

lib
|--lib1
|   |--style1.css
|   +--image1.png
+--lib2
   |--styles
   |   +--style2.css
   +--images
       +--image2.png

在index.html中,将引用所有样式表并将其放置在构建块中。这样,当执行usemin任务时,库的样式表会串联在一个缩小的文件中,并放在输出文件夹中。相应的 Assets (图像)也将复制到此输出文件夹中,并在img文件夹中展平。输出文件夹的结构看起来像
out
|--allstyles.min.css
|--image1.png
+--image2.png

如您所料,串联的样式表(在此示例中)具有两个不同的相对URI:
  • image1.png
  • ..\images\image2.png

  • 这导致无法找到某些图像的问题。我需要一种解决方案,以便将所有相对URI重新设置为out文件夹。我尝试使用target任务的rootcssmin选项,但无济于事。有人可以为我指出此任务的正确配置,还是可以实现我正在寻找的目标的另一个Grunt任务?

    提前致谢!

    最佳答案

    我在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']);
    

    您可以发布您的gruntfile进行比较吗?

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

    关于gruntjs - Grunt 的cssmin重新基准相对URI?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/21563766/

    10-11 20:21