0

我已经编写了 grunt uncss 任务来删除我的代码中未使用的 css。但是它删除了我的代码中使用的大量 css。我猜原因是，它没有在指令中检查 css'my-directive' 这是我的 index.html：

<div> 
  <span class="duplicate-text" ng-if="duplicateMode" ng-bind-template="{{'html.peopleeditor.duplicate.label'|property}}"></span>
</div>
<div class="peopleeditor col-xs-10 col-sm-10 col-md-10 col-lg-10" id="peopleeditorcontainer">
  <my-directive controller="actionframework.controller" options="options"/>
</div>

在我的 index.css 中，我有一些类，例如：

.peopleeditor .form-horizontal .control-label,
    .peopleeditor .form-horizontal .radio,
    .peopleeditor .form-horizontal .checkbox,
    .peopleeditor .form-horizontal .radio-inline,
    .peopleeditor .form-horizontal .checkbox-inline {
      margin-bottom: 0;
      margin-top: 0;
    }
.duplicate-text {
  font-family: 'Roboto-Bold', sans-serif;
  font-size: 12px;
}

在运行 grunt uncss 任务时，许多带有 .peopleeditor 类的样式都被删除了。是不是因为peopleeditor类会被应用到里面的html标签上'my-directive'。有什么方法可以读取指令模板中的样式，以便 grunt uncss 任务不会忽略这一点。

4

1 回答 1

2

有一个ignore选项，您可以在运行时添加classes 和ids 添加，例如您的指令类。

ignore (Array): provide a list of selectors that should not be removed by UnCSS. For example, styles added by user interaction with the page (hover, click), since those are not detectable by UnCSS yet. Both literal names and regex patterns are recognized. Otherwise, you can add a comment before specific selectors:

/* uncss:ignore */
.selector1 {
    /* this rule will be ignored */
}

.selector2 {
    /* this will NOT be ignored */
}

/* uncss:ignore start */

/* all rules in here will be ignored */

/* uncss:ignore end */

如果需要，还有一个选项ignoreSheets可以忽略整个样式表。

查看UnCSS 文档以获取更多信息。

根据您当前的情况Gruntfile.js，您需要像这样添加它：

module.exports = function(grunt) {

   grunt.initConfig({
      pkg: grunt.file.readJSON('package.json'),

      uncss:{
         dist: {
             files:{
                 'dist/index.css' : ['apps/**/*.*']
             },
             options: {
               ignore: ['.peopleeditor'] // Add classes, or regex
             }
        }
      }
   });
   grunt.loadNpmTasks('grunt-uncss');

   grunt.registerTask('default', [
      'uncss:dist'
   ]);
};
于 2017-10-09T09:15:53.673 回答