Question

我正在使用带有以下“Content”文件夹结构的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/dir1/images/image1.png”）但幸运的是这个grunt配置修复：

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"]
            }
        }
    }

新问题：生成的源码图（“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，但是尽管源图工作正常，我发现一般图像/导入网址重新设置不能正常工作，所以回到cssmin。

非常感谢！

Answer 1

想出了我自己的解决方案。我写了一个任务，它读取源映射JSON，获取源数组，重新绑定它们，然后再次写入文件。这个解决方案似乎对我有用，希望如果他们处于类似的情况下，这也可以帮助其他人。只需运行你的cssmin任务，然后运行这个：

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);
            }
        });

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

Grunt cssmin / CleanCSS源地图重新定位

1 个答案: