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

我已经编写了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任务时，.peopleeditor类的许多样式都将被删除。是因为peopleeditor类将应用于'my-directive'内部的html标签。有什么方法可以读取指令模板中的样式，从而使grunt uncss任务不会忽略这一点。

最佳答案

有一个ignore选项，您可以在运行时添加class es和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'
   ]);
};

关于javascript - grunt uncss任务如何在内部工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46642688/