Sage & UnCSS


#1

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 @benword 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


Sage Gulp UnCSS - Ignore list
Site Speed - Performances
How to add CSS Shrink and Combine Media Query to gulpfile.js to Affect main.css?
#2

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:

  1. I’m using the latest Sage 8.3.0
  2. Install necessary gulp modules using this cmd: https://gist.github.com/CFXd/e801388de55a9915e58f#file-gulp_module_installation
  3. Add JSON sitemap code to your extras.php: https://gist.github.com/CFXd/e801388de55a9915e58f#file-sitemap-php
  4. Copy this into your gulpfile.js: https://gist.github.com/CFXd/e801388de55a9915e58f#file-gulpfile-js
  5. Run gulp --production once
  6. Uncomment the above gulpfile.js lines 105-109
  7. 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:

  1. 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.
  2. 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.
  3. 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!


ERROR: generating sitemap.json
#3

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.

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?


#4

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


#5

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.


#6

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


#7

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


#8

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)?


#9

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:


#10

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?


#11

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.


#12

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?


#13

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

#14

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. :pensive:

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.


#15

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’.


#16

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


#17