缩小 css - 删除标记文件内联样式中的 angularjs 表达式

Question

我和 angularjs 一起工作。

在标记文件中，我有这样的内联样式：

<div class="progress-bar"
    style="display: block; width: {{::provision.precision}}%">
</div>

我将此 html 代码缩小 grunt-contrib-htmlmin。这是 grunt 配置：

htmlmin: {
  dist: {
    options: {
      collapseWhitespace: false,
      conservativeCollapse: false,
      collapseBooleanAttributes: true,
      removeComments: true,
      removeCommentsFromCDATA: true,
      removeOptionalTags: true,
      minifyJS: {
        mangle: false
      },
      minifyCSS: true
    },
    files: [{
      expand: true,
      cwd: '<%= yeoman.dist %>',
      src: [
        '*.html',
        'views/{,*/}*.html'
      ],
      dest: '<%= yeoman.dist %>'
    }]
  }
}

htmlmin 内有 minifyCSS，使用 grunt-contrib-cssmin.

缩小内联样式

这样缩小后的结果：

<div class="progress-bar" style="display: block;"></div>

样式属性中没有宽度。

有人知道如何配置 minifyCSS 以在 minify 后保留 width: {{::provision.precision}}% 吗？

Answer 1

我找到了解决方案。

使用 ng-style 而不是 style 属性。就这些！

缩小 css - 删除标记文件内联样式中的 angularjs 表达式

Minify css - remove angularjs expression in inline style for markup file

html

css

minify

angularjs