4

当运行 grunt.js 任务 cssMin https://github.com/gruntjs/grunt-contrib-cssmin

正在删除 Svg css 属性。

例如：

.testClass {
   r: 4;
   width: 3px;
   margin-left: 18px !important;
}

转换为

.testClass {
   width: 3px;
   margin-left: 18px !important;
}

我怎样才能防止这种情况发生？

4

2 回答 2

3

grunt-contrib-cssmin内部使用clean-css，如options中所述，并且任何 native ( clean-css) 选项“传递给 clean-css”。

clean-css为方便起见，将优化分组为级别。有两个选项控制规则的删除，都在级别 2 下：

restructureRules: false, // should disable all removals
skipProperties: []       // specify individual rules to skip

这应该这样做：

cssmin: {
  options: {
    skipProperties: ['r']
  }
}

从 clean-css 4.2.0开始，可以使用完全跳过片段的“注释”块方法：

/* clean-css ignore:start */
.testClass {
   r: 4;
   width: 3px;
   margin-left: 18px !important;
}
/* clean-css ignore:end */

笔记4.2尚未发布。

根据文档，经过一些测试，上述方法似乎都不起作用，尽管它们“应该”。
我唯一的选择是替换grunt-contrib-cssmin为grunt-postcss cssnano（这是我用 grunt 来缩小的）：

npm install grunt-postcss cssnano

grunt.initConfig({
  postcss: {
    processors: [
      require('cssnano')({
        // options here...
      })
    ]
  },
});

grunt.loadNpmTasks('grunt-postcss');
grunt.registerTask('postcss', ["postcss"]);

在实践中，我使用更多的postcss插件。
这是一个带有autoprefixer、pixrem和postcss-flexbox的实际示例cssnano：

module.exports = function(grunt) {
    grunt.initConfig({
        postcss: {
            options: {
                processors: [
                    require('pixrem'),
                    require('autoprefixer')({browsers: ['> 0%']}),
                    require('postcss-flexboxfixer'),
                    require('cssnano')({
                      autoprefixer:false,
                      zindex: false
                    })
                ]
            },
            jack: {
                files: [{
                    expand:true,
                    flatten:true,
                    cwd: 'assets/',
                    src: ['scss/*.css', '!**/variables.css'],
                    dest:'assets/css/'
                }]
            }
        },
        watch: {
            styles: {
                files: [
                    'assets/scss/*.css'
                ],
                tasks:['postcss:jack']
            }
        }
    });
    grunt.loadNpmTasks('grunt-postcss');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default', ["watch:styles"]);
    grunt.registerTask('jack', ["postcss:jack"]);
};

我特意注册了一个只运行postcss插件的任务：

grunt jack

不要忘记您需要安装每个插件才能与postcss. 对于上述情况，您需要：

npm install grunt-postcss cssnano pixrem autoprefixer postcss-flexboxfixer

...而且，很可能，你会想要改变files以匹配你拥有的任何东西。

这一次，我测试了。该r属性使其进入缩小文件：

.testClass{r:20;width:3px;margin-left:18px!important}
于 2017-07-01T03:43:16.040 回答
2

您应该能够通过在选项中将重组设置为 false 来防止这种情况：

options: {
  restructuring: false
},
于 2017-07-01T01:28:47.903 回答