javascript - grunt uncss 任务在内部是如何工作的

Question

我已经编写了 grunt uncss 任务来删除代码中未使用的 css。但是它删除了我的代码中使用的很多 css。我想原因是，它没有检查指令 'my-directive' 中的 css这是我的 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 任务时，许多带有 .peopeleditor 类的样式被删除。是不是因为 peopleeditor 类将应用于 'my-directive' 内的 html 标签。有什么方法可以读取指令模板中的样式，以便 grunt uncss 任务不会忽略它。

Answer 1

有一个 ignore 选项，您可以在其中添加 class 和 id 在运行时添加，就像您的指令类一样。

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 docs了解更多信息。

根据您当前的 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'
   ]);
};