Question

cssmin grunt plugin grunt-contrib-cssmin修剪css sourcemap sources url中的前导斜杠，从而使css映射不正确。同时在手动编辑源图文件（向每个源URL添加前导斜杠）后，所有内容似乎都正确映射。原始源映射文件取自原始css（未分析）中的注释，该注释由其他grunt插件正确生成。

我的文件结构：

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

原始（未经通知的）css的源图 - 来源网址是正确的。分别由 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'
        }
      }
    }
  });
};

Answer 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插件。但它解决了这个问题。

cssmin grunt插件在源地图

1 个答案: