Как внутреннее задание grunt uncss работает

Question

Я написал 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 не игнорировала это.

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 для получения дополнительной информации.

На основании вашего текущего 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'
   ]);
};