Sage & UnCSS

evance · October 13, 2015, 4:56pm

Hey folks,

I am struggling to find an explanation / working example on how to use UnCSS with gulp and since the existing posts don’t do the trick for me I am taking the liberty of raising the topic again here…

In an ideal world I would utilize the sitemap-generator-function (taken from here) to dynamically insert all the needed pages/URLs of my project and then hook into sage’s existing build process. The guide @ben proposed here is too vague for me since it a) doesn’t include all the pages/URLs dynamically and b) I don’t see how I can introduce it with the current build-sequence properly.

Has anybody succeeded with running UnCSS in the current environment? Any hints on which code to plug together to make this function?

Thanks & regards,
Henning

cfx · October 15, 2015, 12:02pm

I’ve made some progress on this but I’m still becoming familiar with the Gulp build process myself. This actually works now but is a little rough around the edges and has a few caveats:

I’m using the latest Sage 8.3.0
Install necessary gulp modules using this cmd: https://gist.github.com/CFXd/e801388de55a9915e58f#file-gulp_module_installation
Add JSON sitemap code to your extras.php: https://gist.github.com/CFXd/e801388de55a9915e58f#file-sitemap-php
Copy this into your gulpfile.js: https://gist.github.com/CFXd/e801388de55a9915e58f#file-gulpfile-js
Run gulp --production once
Uncomment the above gulpfile.js lines 105-109
Run gulp --production again

I tested the above on a brand new installation and it worked like a charm, dropped my CSS from ~25kb down to ~2.5kb. Some caveats:

It only works when running gulp --production task (as it should), however the sitemap.json gets generated every time you run a gulp task, even without production task specified. I’m not 1337 enough with gulp yet to get that sitemap only generating in production task.
Obviously it would be nice if you didn’t have to start with a commented gulpfile.js section and then uncomment, but without that gulp spits out an error because sitemap.json doesn’t exist at first and it needs to be run once for it to be created. Again not 1337 enough to solve this one.
Would be even better if instead of generating a sitemap.json file gulp would just fetch the JSON sitemap as a stream and use that.

Any improvements and help with the caveats above would be awesome. I’d love to get an updated blog post out of this and will certainly credit anyone who wants to pitch in.

View a diff of the original gulpfile.js right here

Enjoy and thanks for feedback & suggestions!

darjanpanic · October 15, 2015, 2:18pm

Nice one @cfx.

Don’t forget to ignore jQuery/Bootstrap classes like .open, .fade, .admin-bar etc. which aren’t seen on the sites and are added via js.

gist.github.com

https://gist.github.com/darisi/7b4396bddc382b659e95

Gruntfile.js

    uncss: {
      dist: {
        options: {
          ignore: [
                    /(#|\.)fancybox(\-[a-zA-Z]+)?/,
                    /expanded/,
                    /js/,
                    /wp-/,
                    /align/,
                    /admin-bar/,

This file has been truncated. show original

Here’s a partial gist of my old file still using sage 6 at that time with Grunt, but i think it can be still useful to someone for the ignores. At that time i think i set it up so i could just use it as another separate command.

The //flexible section was used for my custom ACF select fields that controlled the looks of modules but as i didn’t use all of them UnCss didn’t pick them up so had to ignore them.

Unless uncss improved from then and does it auto?

cfx · October 15, 2015, 3:15pm

Great reminder @darjanpanic, and this list can easily be added to gulpfile.js too!

evance · October 15, 2015, 7:58pm

Oh, wow – thanks so much @cfx , this is truly great. Also @darjanpanic for the ignore-list, came in very handy.

After having issues with my Mac OS running into some open pipe / file limitations (fixed that on a per-session basis via (sudo if needed) launchctl limit maxfiles 65536 65536 and ulimit -n 4096) and having to bump the node-version I finally arrived at the UnCSS’d stylesheet and am impressed…

I went from 232kb to 80kb (that’s some 65% if my math is still intakt)!

Kudos guys, I’m sure a lot of people will profit from this.

cfx · October 15, 2015, 10:42pm

Nice! Wish we could get some more experienced gulpers like @swalkinshaw @austin or @ben to look this over and tidy it up a bit

ash · October 22, 2015, 10:13am

I’m sooo keen to get this working. It generates the sitemap.json file fine, but on the second pass I get this…

SyntaxError: Parse error

Any ideas?

Thanks

evance · October 22, 2015, 10:46am

Do you have any more info on the error? At which step is it thrown exactly? Any other debuggable stuff?

Did you set (sudo if needed) launchctl limit maxfiles 65536 65536 and ulimit -n 4096)?

evance · October 30, 2015, 4:42pm

I went ahead and extended the JSON sitemap function to include some more templates that are not being gathered by the regular query – maybe useful for somebody:

gist.github.com

https://gist.github.com/E-VANCE/227404841abe29398334

extras.php

<?php

/**
 * Generate JSON sitemap for use with UnCSS
 */

function show_sitemap() {
	
	if (WP_ENV === 'development' && isset($_GET['show_sitemap'])) {

This file has been truncated. show original

Newton · November 17, 2015, 11:38am

I get the following error when trying this (after uncommenting the lines 105-109), even after doing it the first time or trying to repeat the procedure:

[12:37:34] Starting 'styles'...
[12:37:34] 'styles' errored after 18 ms
[12:37:34] SyntaxError: /Applications/MAMP/htdocs/roots/wp-content/themes/testbase/sitemap.json: Unexpected token <
at Object.parse (native)
at Object.Module._extensions..json (module.js:450:27)

…

I suspect that I maybe did step 3 incorrect.

I took the code from the sitemap.php and added it at the bottom of extras.php, just below the clean up excerpt section, is this the correct procedure?

On notice, after successfully (having gulpfile.js 105-109 lines commented) running gulp --production, I get this sitemap:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>301 Moved Permanently</title>
</head><body>
<h1>Moved Permanently</h1>
<p>The document has moved <a href="http://localhost/roots/?show_sitemap">here</a>.</p>
</body></html>

Does anyone know what the problem might be?

evance · November 17, 2015, 1:22pm

Looks like the sitemap doesn’t render properly – you can verify the contents of the sitemap by simply calling it via YOUR-SITE/?show_sitemap.

The 301 Moved Permanently hints at some server misconfiguration and/or faulty redirect.

Newton · November 17, 2015, 1:30pm

Thanks for your reply! Could you give some suggestions why it happens? When I visit ?show_sitemap I get the same site as home url.

I’m using mamp and the only change in directory I’ve made is the one in manifest.json so that I can use browsersync:

  "config": {
“devUrl”: “http://localhost/roots”
}

Do you have any idea how I could solve it?

evance · November 17, 2015, 2:05pm

Using MAMP (PRO) as well and works fine by me… Double-Check these items:

Is WP_ENV set to development?
Copy the sitemap-function by @cfx without changes (sometimes the __NAMESPACE__ is missing)
Check your .htaccess for any misguided configs

Newton · November 17, 2015, 2:38pm

Thanks for your reply!

I don’t use the pro version of MAMP but it shouldn’t be a difference I guess. It didn’t state anything about WP_Env in the installation, so I added it myself in wp-config:

define('WP_ENV', 'development');

I copied the content of @cfx sitemap.php into assets/extras.php, just below function excerpt_more() (without the <?php since it already exists).

The same problem remains.

My sitemap.json looks the same, but now when I visit: http://localhost/roots/?show_sitemap I get a sitemap in json:
[
“http://localhost/roots/index.php/2015/11/17/hej-varlden/”,
“http://localhost/roots/index.php/exempelsida/”
]

Doing gulp --production works fine having line 105-109 commented out in gulpfile.js.

I work locally on this and don’t have .htaccess.

Newton · November 17, 2015, 2:46pm

Whole error message:

15:46:13] SyntaxError: /Applications/MAMP/htdocs/roots/wp-content/themes/testbase/sitemap.json: Unexpected token <
at Object.parse (native)
at Object.Module._extensions…json (module.js:450:27)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:311:12)
at Module.require (module.js:366:17)
at require (module.js:385:17)
at /Applications/MAMP/htdocs/roots/wp-content/themes/testbase/gulpfile.js:107:15
at /Applications/MAMP/htdocs/roots/wp-content/themes/testbase/node_modules/lazypipe/index.js:27:19
at Array.map (native)
at build (/Applications/MAMP/htdocs/roots/wp-content/themes/testbase/node_modules/lazypipe/index.js:26:37)
at cssTasks (/Applications/MAMP/htdocs/roots/wp-content/themes/testbase/gulpfile.js:131:7)
at /Applications/MAMP/htdocs/roots/wp-content/themes/testbase/gulpfile.js:186:28
at arrayEach (/Applications/MAMP/htdocs/roots/wp-content/themes/testbase/node_modules/lodash/index.js:1289:13)
at Function. (/Applications/MAMP/htdocs/roots/wp-content/themes/testbase/node_modules/lodash/index.js:3345:13)
at Manifest.forEachDependency (/Applications/MAMP/htdocs/roots/wp-content/themes/testbase/node_modules/asset-builder/lib/Manifest.js:47:5)
at Gulp. (/Applications/MAMP/htdocs/roots/wp-content/themes/testbase/gulpfile.js:185:12)
[15:46:13] ‘build’ errored after 122 ms
[15:46:13] Error in plugin ‘run-sequence’
Message:
An error occured in task ‘styles’.

ben · November 17, 2015, 3:26pm

@Bobeta Please don’t turn threads like this into a personal support thread. This has already been solved so I’m closing this up.