Css addy osmani如何在单页平均堆栈应用程序中使用UNCS

我使用Yeoman生成的平均堆栈创建了一个应用程序

我想把它包括在我的咕噜声中

不幸的是，这是不可能的，因为该站点是SPA。

---

我读过，我可以生成一个站点地图，然后通过UNCS使用它；但是，有人可以实现uncss并帮助我完成这个过程吗，因为我不知道如何真正开始？

这可以通过命令行上的

uncss

或

grunt uncss

来完成……尽管后者存在开放性问题。您提到的

grunt uncss

页面上的示例，使用WordPress站点地图，很有帮助，但没有明确说明如何处理SPA。希望这能有所帮助

1）命令行

如前所述，您现在可以将URL直接传递到UNCS以生成css输出。您可以将URL传递到UNCS而不是文件

因此，如果您的SPA足够简单，您可以使用如下核心

uncss

应用程序：

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

uncsshttp://localhost:3000/mycoolapp >样式表.css

2）咕噜咕噜的uncss

在编写此答案时，需要知道一个with

grunt uncss

，以便通过grunt使用uncss

虽然

url

选项已贬值，但将url放入

文件

数组的替代方法将无法工作，因为存在未解决的问题。但是，可以使用

url

选项来检查url的数组。在本例中，

Gruntfile.js

将有如下部分：

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

URL

中的数组需要包含URL列表。鉴于此插件仍在开发中，您应该关注github页面，以便在构建于v.0.3.x的基础上时收到可能会中断的更改的通知

两个注释：

• phantom.js将用于此处理，因此只要您的SPA足够友好，phantom可以完成它的工作…这应该适合您
• 您必须手动输入URL数组，这就是

  grunt css

  页面上的WordPress示例正在实现的自动化…因此，如果您能够实现类似的自动化，生活将变得更加轻松

---

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