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任务时，许多带有.peopleeditor类的样式正在被删除。是因为peopleeditor类将应用于'my-directive'内的html标记。有没有办法在指令模板中读取样式，以便grunt uncss任务不会忽略它。

Answer 1

有一个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'
   ]);
};

grunt如何在内部解密任务

1 个答案: