Grunt cssmin / CleanCSS源码映射 [英] Grunt cssmin / CleanCSS source map rebasing

问题描述

我使用的cssmin具有以下内容文件夹结构：

  src 
 | --dir1 
 | | --style1.css 
 | | --images 
 | | --image1.png 
 | --dir2 
 | --style2.css 
 | --images 
 | --image2.png 
 dist 
 | --styles.min.css 
 | --styles.min.css.map 
  

其中styles.min.css和styles.min.css.map是连接/缩小src文件夹中所有样式表的结果。

我首先遇到了styles.min.css包含错误位置的图像URL（即images / image1.png而不是../src/

  cssmin：{
 options：dir1 / images / image1.png）但幸好这个咕噜声配置固定了： {
 rebase：true，
 sourceMap：true 
}，
 all：{
 options：{
 keepSpecialComments：0 
}，
档案：{
'content / dist / styles.min.css'：[content / src / dir1 / style1.css，content / src / dir2 / style2.css] 
} 
} 
} 
  

新问题： strong>生成的sourcemap（styles.min.css.map）包含这样的源代码：[content / src / dir1 / style1.css，content / src / dir2 / style2.css]而不是[ ../src/dir1/style1.css，../src/dir2/style2.css]。这意味着地图指向了不正确的位置，例如：

content / dist / content / src / dir1 / style1.css和content / dist / content / src / dir2 / style2.css

我能做些什么来解决这个问题？

作为参考，我也尝试过csswring，但是尽管源代码工作正常，但我发现一般图像/导入url重新绑定不能正常工作，因此返回到cssmin 。

非常感谢！

解决方案

提出了我自己的解决方案。我写了一个任务，它读取源地图JSON，获取源数组，重新绑定它们，然后再次写入文件。这个解决方案似乎对我来说很好，希望如果他们遇到类似的情况，也可以帮助其他人。只需运行cssmin任务，然后执行以下命令：

  grunt.registerTask（rebase-css-sourcemap-sources，Rebase （）函数（）{
 
 var filePath =./content/dist/styles.min.css.map; 
 if（grunt.file.exists（） filePath））{
 var sourceMap = grunt.file.readJSON（filePath）; 
 
 var sources = sourceMap.sources; 
 if（sources）{
 for（ var i = 0; i< sources.length; i ++）{
 sources [i] = sources [i] .replace（content / src，../src）; 
} 
 grunt.file.write（filePath，JSON.stringify（sourceMap））; 
 grunt.log.ok（Rebased CSS source map source urls。）; 
} 
 } else {
 grunt.log.error（Source map file does not exist：+ filePath）; 
} 
}）; 
  

虽然这个解决方案适用于我，但如果有人知道解决这个问题的另一种方法，使用cssmin，那会更好。

I'm using cssmin with the following "Content" folder structure:

src
|--dir1
|   |--style1.css
|   |--images
|      |--image1.png
|--dir2
   |--style2.css
   |--images
      |--image2.png
dist
|--styles.min.css
|--styles.min.css.map

Where styles.min.css and styles.min.css.map are the result of concatenating/minifying all stylesheets in the"src" folder.

I first had issues where styles.min.css contained URLs for images in the wrong places (i.e. "images/image1.png" instead of "../src/dir1/images/image1.png") but thankfully this grunt configuration fixed that:

cssmin: {
        options: {
            rebase: true,
            sourceMap: true
        },
        all: {
            options: {
                keepSpecialComments: 0
            },
            files: {
                'content/dist/styles.min.css': ["content/src/dir1/style1.css", "content/src/dir2/style2.css"]
            }
        }
    }

The new problem: The generated sourcemap ("styles.min.css.map") contains sources like this: ["content/src/dir1/style1.css", "content/src/dir2/style2.css"] instead of ["../src/dir1/style1.css", "../src/dir2/style2.css"]. This means the map is pointing to the incorrect locations, such as:

"content/dist/content/src/dir1/style1.css" and "content/dist/content/src/dir2/style2.css"

What can I do to resolve this?

For reference, I have also tried the csswring, however despite sourcemaps working fine, I found general image/import url rebasing wasn't working properly, so went back to cssmin.

Thanks very much!

解决方案

Came up with my own solution. I wrote a task which reads the source map JSON, gets the array of sources, rebases them, then writes the file again. This solution seems to work well for me, hopefully this can help someone else too if they're in a similar situation. Just run your cssmin task and then this one:

grunt.registerTask("rebase-css-sourcemap-sources", "Rebases the CSS source map urls", function() {

            var filePath = "./content/dist/styles.min.css.map";
            if (grunt.file.exists(filePath)) {
                var sourceMap = grunt.file.readJSON(filePath);

                var sources = sourceMap.sources;
                if (sources) {
                    for (var i = 0; i < sources.length; i++) {
                        sources[i] = sources[i].replace("content/src", "../src");
                    }
                    grunt.file.write(filePath, JSON.stringify(sourceMap));
                    grunt.log.ok("Rebased CSS source map source urls.");
                }
            } else {
                grunt.log.error("Source map file does not exist: " + filePath);
            }
        });

While this solution works for me, if anyone knows of an alternative method of solving this problem which ideally just uses cssmin, that would be better.

这篇关于Grunt cssmin / CleanCSS源码映射的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！