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

Question

My AngularJS application is composed by two urls: 我的AngularJS应用程序由两个URL组成：

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

This is the simplified index.html file: 这是简化的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>

In addition to containing the application logic, the script.js file also contains the html templates that are loaded via $templateCache service. 除了包含应用程序逻辑之外， script.js文件还包含通过$ templateCache服务加载的html模板。

With the http://myapp/#/foo url, the foo html template is inserted in the <div ui-view></div> element. 使用http://myapp/#/foo url， foo html模板将插入<div ui-view></div>元素中。 In the same way, with the http://myapp/#/bar url, the bar html template is inserted in <div ui-view></div> . 以同样的方式，使用http://myapp/#/bar url， bar html模板插入到<div ui-view></div> 。

What I want to do is to use the grunt-uncss task to reduce the style.css size. 我想要做的是使用grunt-uncss任务来减少style.css大小。

My first attempt was: 我的第一次尝试是：

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

The style.css file was reduced, but it did not included the styles required by the foo and bar pages. style.css文件已减少，但它没有包含foo和bar页面所需的样式。

My second attempt was using the deprecated urls parameter to be loaded with PhantomJS: 我的第二次尝试是使用已弃用的urls参数加载PhantomJS：

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

Again, the style.css file was reduced, but it did not included the styles required by the foo and bar pages. 同样， style.css文件已减少，但它没有包含foo和bar页面所需的样式。

Someone knows how to solve this problem? 有人知道如何解决这个问题吗？

Does grunt-uncss only work with static content? grunt-uncss是否仅适用于静态内容？

Thanks in advance, 提前致谢，

Bernardo Pacheco 贝尔纳多帕切科

Answer 1

Specify all your html files, including views: 指定所有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' ]
        }
    }
}

You can specify more than one file of html, so you should include all your view files (in this case foo.html and bar.html). 您可以指定多个html文件，因此您应该包含所有视图文件（在本例中为foo.html和bar.html）。 Also, use ignore option to add classes that are loaded at runtime (do not already exist in html files), ie created by jQuery, or ngAnimate if you are using one. 另外，使用ignore选项添加在运行时加载的类（在html文件中不存在），即由jQuery创建，如果使用的话，则使用ngAnimate。

There are more options, for example you can customize which media queries should be left after uncssing, please refer to the documentation provided by authors - https://github.com/addyosmani/grunt-uncss . 还有更多选项，例如您可以自定义解密后应该留下哪些媒体查询，请参阅作者提供的文档 - https://github.com/addyosmani/grunt-uncss 。

Answer 2

shameless plug 无耻的插头

You can refer to my example repo on github. 您可以在github上参考我的示例repo。 There it has a full example of a simple todo app running angular, bower, and grunt-uncss. 在那里它有一个简单的todo应用程序运行角度，凉亭和grunt-uncss的完整示例。

Edit: Sorry about that thought I had added the link 编辑：对不起那个想法我添加了链接

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

The basic configuration would be to add the below code to your gruntfile 基本配置是将以下代码添加到您的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 } } },

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

问题描述

2 个解决方案

解决方案1
4 2014-11-03 16:30:19

解决方案2
0 2015-04-27 12:38:47

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

问题描述

2 个解决方案

解决方案1 4 2014-11-03 16:30:19

解决方案2 0 2015-04-27 12:38:47

解决方案1
4 2014-11-03 16:30:19

解决方案2
0 2015-04-27 12:38:47