Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/loops/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Gruntjs Grunt cssmin/CleanCSS源映射重定基址_Gruntjs_Source Maps_Gruntfile_Grunt Contrib Cssmin_Clean Css - Fatal编程技术网

Gruntjs Grunt cssmin/CleanCSS源映射重定基址

Gruntjs Grunt cssmin/CleanCSS源映射重定基址,gruntjs,source-maps,gruntfile,grunt-contrib-cssmin,clean-css,Gruntjs,Source Maps,Gruntfile,Grunt Contrib Cssmin,Clean Css,我正在使用具有以下“内容”文件夹结构的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”文件夹中所有样式

我正在使用具有以下“内容”文件夹结构的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”文件夹中所有样式表的结果

我第一次遇到的问题是style.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,但是尽管sourcemaps工作得很好,但我发现通用的图像/导入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);
            }
        });
grunt.registerTask(“重新设置css源映射源的基址”,“重新设置css源映射URL的基址”,函数(){
var filePath=“./content/dist/styles.min.css.map”;
if(grunt.file.exists(filePath)){
var sourceMap=grunt.file.readJSON(filePath);
var sources=sourceMap.sources;
如果(来源){
对于(var i=0;i
虽然这个解决方案对我有效,但如果有人知道解决这个问题的另一种方法,理想情况下只使用cssmin,那就更好了