css - 如何在单页MEAN堆栈应用程序中使用addy osmani的uncss

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

我希望将uncss包括到我的咕unt声版本中。

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

最佳答案

可以在命令行中使用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）咕unt声

在编写此答案时，需要知道带有grunt-uncss的open issue通过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可以工作即可...这应该对您有用。
您必须手动输入网址数组，这是grunt-css页面上的WordPress示例正在自动执行的操作...因此，如果您可以类似地进行自动执行，则生活将会更加轻松。

关于css - 如何在单页MEAN堆栈应用程序中使用addy osmani的uncss，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24709127/