How to use uncss by addy osmani with a Single Page MEAN stack application

Question

I've created a application using the MEAN stack which was generated by Yeoman angular-fullstack

I would love to include uncss to my grunt build.

Unfortunately, this is not possible given that the site is SPA.
I've read that I can generate a site map and then use that through uncss; however, could someone please implement uncss and help me through this process for I dont know how to really start?

You will probably have to use a headless browser to capture a static version of your site then use uncss on that. — Jon, Jul 12 '14 at 05:03
how would I go about learning how to capture a static version of my site? — Armeen Moon, Jul 13 '14 at 19:18

score 1 · Accepted Answer · answered Jul 15 '14 at 15:30

This can be done with uncss at a command line or with grunt-uncss...although the latter has open issues. The example on the grunt-uncss page you mention, using a WordPress sitemap , is helpful but doesn't clearly explain what to do about SPA's. Hopefully this helps.

1) Command line

As the docs on the github page explain, you can now pass URL's directly into uncss to generate css output. You can pass URL's to uncss instead of files...

Thus, if your SPA is simple enough, you could use the core uncss app like this:

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

2) grunt-uncss

At the time of writing this answer, there is an open issue with grunt-uncss that needs to be known to use uncss via grunt.

While the url option is depreciated, the alternative approach to put the URL's into the file array won't work because of the open issue. However, the url option can still be used so that an array of URL's can be checked. In this case, the Gruntfile.js would have a section like this:

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

The array in urls would need to contain a list of urls. Given that this plugin is still in development, you should watch the github page so you are notified of potentially breaking changes as it builds upon v.0.3.x...

Two notes:

phantom.js will be used for this processing, so as long as your SPA is friendly enough that phantom can do it's work...this should work for you.
you have to enter the array of urls by hand, which is what the WordPress example off the grunt-css page is automating...so if you can similarly automate, life will be easier.

How to use uncss by addy osmani with a Single Page MEAN stack application

1 Answers1