如何在 AngularJS 应用程序中使用 grunt-uncss？答案

【问题标题】：How can I use grunt-uncss with an AngularJS application?如何在 AngularJS 应用程序中使用 grunt-uncss？
【发布时间】：2014-10-29 19:18:05
【问题描述】：

我的 AngularJS 应用程序由两个 url 组成：

http://myapp/#/foo
http://myapp/#/bar

这是简化的 index.html 文件：

<html>

  <head>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>

  <body>
    <div ui-view></div>
  </body>

  <script type="text/javascript" src="script.js"></script>

</html>

除了包含应用程序逻辑之外，script.js 文件还包含通过 $templateCache 服务加载的 html 模板。

通过http://myapp/#/foo url，foo html 模板被插入到<div ui-view></div> 元素中。同理，通过http://myapp/#/bar url，bar html 模板被插入到<div ui-view></div>。

我想做的是使用grunt-uncss 任务来减小style.css 的大小。

我的第一次尝试是：

uncss: {
  dist: {  
    files: {
      'style.css': [ 'index.html' ]
    }
}

style.css 文件已减少，但它不包含 foo 和 bar 页面所需的样式。

我的第二次尝试是使用 deprecated urls parameter 加载 PhantomJS：

uncss: {
  options: {
    urls; [ 'http://myapp/#/foo', 'http://myapp/#/bar' ]
  },
  dist: {  
    files: {
      'style.css': [ 'index.html' ]
    }
}

同样，style.css 文件已减少，但它不包含 foo 和 bar 页面所需的样式。

有人知道如何解决这个问题吗？

grunt-uncss 仅适用于静态内容吗？

提前致谢，

贝尔纳多·帕切科

【问题讨论】：

/foo 和 /bar 都有自己的样式表吗？还是全部包含在 style.css 中
@KevinB 不，所有样式都包含在 style.css 文件中
我没有看到任何在具有多个路由的角度应用程序上使用此示例的示例，这些路由具有未在前面使用的 css。我认为urls: 选项将是唯一有效的，并且只有当您的 Angular 应用程序处于 html5 模式时才会有效。
您的模板是静态文件吗？除了 index.html 之外，您能只指向那些静态文件吗？
@KevinB 我将我的 Angular 应用程序转换为 html5 模式并使用 urls 参数进行了测试，但它不起作用。我的模板包含简单的模板，只是一些引导类，仅此而已。

标签： javascript angularjs gruntjs

【解决方案1】：

指定所有的 html 文件，包括视图：

uncss: {
    dist: {
        options: {
            ignore: ['.ng-move', '.ng-enter', '.ng-leave', '.created_by_jQuery']
        },
        files: {
            'style.css': [ 'index.html', 'views/foo.html', 'views/bar.html' ]
        }
    }
}

您可以指定多个 html 文件，因此您应该包含所有视图文件（在本例中为 foo.html 和 bar.html）。此外，使用忽略选项来添加在运行时加载的类（html 文件中尚不存在），即由 jQuery 创建，或者如果您使用的是 ngAnimate。

还有更多的选项，比如你可以自定义uncssing后应该留下哪些媒体查询，请参考作者提供的文档-https://github.com/addyosmani/grunt-uncss。

【讨论】：

我遇到了类似的问题，我配置了忽略选项，但 uncss 不支持多个选择器类，例如 .firs.second，我的 css 文件中有数千个这样的选择器
同样在这里，我尝试同时使用 options.urls 并将 url 数组传递到文件中，但似乎都没有真正看到应用程序的渲染版本，因为它正在删除所有嵌套/特定样式在运行时添加的指令模板。我很想看到一个这样的例子，它适用于一个有很多指令的大型 Angular 应用程序。
这个项目不评估注入类的 javascript 吗？

【解决方案2】：

无耻的塞

您可以参考我在 github 上的示例 repo。那里有一个运行 angular、bower 和 grunt-uncss 的简单 todo 应用程序的完整示例。

编辑：对我添加了链接的想法感到抱歉

https://github.com/JeremyCarlsten/grunt-uncss-angular-example

基本配置是将以下代码添加到您的 gruntfile 中

uncss: {
  dist: {
    files: {
      'path/to/where/you/want/cleaned.css': ['path/to/index.html'] // the index html could be a list of html files that all include css files
    }
  }
},

【讨论】：

这个答案在目前的形式下并不是非常有用，但是如果你可以添加一个指向你的 repo 的链接和一个相关的代码 sn-p 显示它如何用于解决由提问者，这可以成为一个可行的答案。