2

次の「コンテンツ」フォルダー構造で 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 が間違った場所 (つまり、「../src/dir1/images/image1.png」ではなく「images/image1.png」) に含まれているという問題がありましたが、ありがたいことに、この面倒な構成は修正されました。それ：

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 も試しましたが、ソースマップは正常に動作しているにもかかわらず、一般的なイメージ/インポート URL のリベースが適切に機能していないことが判明したため、cssmin に戻りました。

どうもありがとう！

4

1 に答える 1

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を使用するだけでこの問題を解決する別の方法を知っている人がいれば、それはより良いでしょう.

于 2016-01-07T11:30:18.217 に答える