1

cssmin grunt プラグインgrunt-contrib-cssminは、CSS ソースマップ ソース URL の先頭のスラッシュを削除するため、CSS マッピングが正しくありません。一方、ソースマップ ファイルを手動で編集した後 (各ソース URL に先頭のスラッシュを追加)、すべてが正しくマップされているようです。元のソースマップ ファイルは、他の grunt プラグインによって正しく生成された元の css (縮小されていない) の注釈から取得されます。

私のファイル構造:

web (resource root)
├─css
│ └─..(css files)
└─less
  └─..(less files)

元の (縮小されていない) css のソースマップ – ソースの URL は正しいです。grunt-contrib-lessとgrunt-autoprefixer によってそれぞれ生成されます:

{"version":3,"sources":["/less/base/normalize.less","/less/base/boilerplate.less"...

縮小された css のソースマップ – ソース ファイルの先頭のスラッシュが消えました。grunt-contrib-cssminによって生成されます:

{"version":3,"sources":["less/base/normalize.less","less/base/boilerplate.less"...

私のgruntfile.jsの一部:

module.exports = function(grunt) {

  grunt.initConfig({
    cssmin: {
      options: {
        shorthandCompacting: false,
        sourceMap: true,
        roundingPrecision: -1
      },
      target: {
        files: {
          'web/css/style.min.css': 'web/css/style.css'
        }
      }
    }
  });
};
4

1 に答える 1

1

今ではgrunt-string-replaceプラグインでこの問題を解決しました。gruntfile.jsソースマップのソースファイルに先頭のスラッシュを追加するように設定しました:

module.exports = function(grunt) {

  grunt.initConfig({
    'string-replace': {
      dist: {
        files: {
          'web/css/style.min.css.map': 'web/css/style.min.css.map'
        },
        options: {
          replacements: [{
            pattern: /"([^"])*(less\/)/g,
            replacement: '"/less/'
          }]
        }
      }
    }

    // other code

  });
};

追加の grunt プラグインが必要なため、これはハックです。しかし、それは問題を解決しました。

于 2015-06-03T16:09:21.477 に答える