Question

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

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网址， foo html模板会插入<div ui-view></div>元素中。同样，使用http://myapp/#/bar网址，栏 html模板会插入<div ui-view></div>。

我想要做的是使用grunt-uncss任务来减少style.css尺寸。

我的第一次尝试是：

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

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

我的第二次尝试是使用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是否仅适用于静态内容？

提前致谢，

Bernardo Pacheco

Answer 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）。另外，使用ignore选项添加在运行时加载的类（在html文件中不存在），即由jQuery创建，如果使用的话，则使用ngAnimate。

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

Answer 2

无耻插件

您可以在github上参考我的示例repo。在那里它有一个简单的todo应用程序运行角度，凉亭和grunt-uncss的完整示例。

编辑：很抱歉我认为我添加了链接

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

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

＆＃13;

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
    }
  }
},

＆＃13;

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

2 个答案: