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?
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.
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.
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.
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.
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">
<title>301 Moved Permanently</title>
<p>The document has moved <a href="http://localhost/roots/?show_sitemap">here</a>.</p>
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 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 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’
An error occured in task ‘styles’.