Grunt cssmin / CleanCSS 源映射变基

2024-02-17

我使用 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"]。这意味着地图指向不正确的位置,例如:

“内容/dist/content/src/dir1/style1.css”和“内容/dist/content/src/dir2/style2.css”

我可以做什么来解决这个问题?

作为参考,我也尝试过 csswring,但是尽管源映射工作正常,我发现一般图像/导入 url 变基无法正常工作,所以回到 cssmin。

非常感谢!


想出了我自己的解决方案。我编写了一个任务,它读取源映射 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,那就更好了。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Grunt cssmin / CleanCSS 源映射变基 的相关文章

随机推荐