addy osmani 如何在单页 MEAN 堆栈应用程序中使用 uncss答案

【问题标题】：How to use uncss by addy osmani with a Single Page MEAN stack applicationaddy osmani 如何在单页 MEAN 堆栈应用程序中使用 uncss
【发布时间】：2014-09-02 18:02:36
【问题描述】：

我使用由 Yeoman angular-fullstack 生成的 MEAN 堆栈创建了一个应用程序

我希望将uncss 包含在我的 grunt 构建中。

很遗憾，鉴于该网站是 SPA，这是不可能的。
我读过我可以生成站点地图，然后通过 uncss 使用它；但是，有人可以实施 uncss 并帮助我完成这个过程，因为我不知道如何真正开始？

【问题讨论】：

您可能必须使用无头浏览器来捕获站点的静态版本，然后在其上使用 uncss。
我将如何学习如何捕获我网站的静态版本？

标签： css angularjs gruntjs single-page-application ngroute

【解决方案1】：

这可以在命令行中使用uncss 或grunt-uncss...尽管后者存在未解决的问题。您提到的grunt-uncss 页面上的示例使用 WordPress 站点地图，这很有帮助，但没有清楚地解释如何处理 SPA。希望这会有所帮助。

1) 命令行

正如docs on the github page 解释的那样，您现在可以将 URL 直接传递到 uncss 以生成 css 输出。您可以将 URL 传递给 uncss 而不是文件...

因此，如果您的 SPA 足够简单，您可以像这样使用核心 uncss 应用程序：

uncss http://localhost:3000/mycoolapp > stylesheet.css

2) grunt-uncss

在撰写此答案时，需要知道 open issue 和 grunt-uncss 才能通过 grunt 使用 uncss。

虽然url 选项已被弃用，但由于未解决的问题，将 URL 放入 file 数组的替代方法将不起作用。但是，url 选项可以still be used 以便可以检查 URL 数组。在这种情况下，Gruntfile.js 会有这样的部分：

uncss: {
  dist: {
    options: {
      ...some options...
      urls         : ['http://localhost:3000/mycoolapp', '...'], // This is the line you need
      ...even more options...
    },

urls 中的数组需要包含一个 url 列表。鉴于此插件仍在开发中，您应该查看 github 页面，以便在它基于 v.0.3.x 构建时收到潜在的重大更改通知...

两个注意事项：

phantom.js 将用于此处理，因此只要您的 SPA 足够友好，phantom 可以完成它的工作...这应该适合您。
您必须手动输入 url 数组，这就是 grunt-css 页面上的 WordPress 示例正在自动执行的操作...因此，如果您可以类似地自动执行操作，那么生活会更轻松。

【讨论】：