Grunt task using critical-css to extract Above the Fold styles from URLs.
This plugin requires Grunt
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
npm install grunt-critical-css --save-dev
The "critical_css" task
In your project's Gruntfile, add a section named
critical_css to the data object passed into
The width of the viewport used in the browser. Used to determine what is "above the fold", i.e what is visible during rendering the page initially.
The height of the viewport used in the browser. Used to determine what is "above the fold", i.e what is visible during rendering the page initially.
An array of CSS selectors or basically any pattern. These are matched against every individual style declaration and if the patterns provided here match the style rule is discarded from the output.
An array of host names to serve as a whitelist where CSS can originate from. Any
CSSRuleList objects with
parentStyleSheet.href not having this host name are
excluded from the critical CSS.
This can be useful to exclude certain styles supplied by 3rd party widgets that are loaded asynchronously anyways.
Boolean Default value:
Controls console output from the headless browser should be added to the output. Useful for debugging purposes.
Integer Default value:
Sets the output buffer for the child process.
In this example, the default options are used to generate the critical CSS from a development server. The generated stylesheet is then saved to a file under the specified path.
Custom Options, multiple targets
In this example, custom options are used to fetch from two different URLs whilst sharing some custom options.
Pro tip: You can add the
grunt-inline plugin to your build pipeline for
embedding the resulting critical stylesheets in your html file or template.
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.
- 0.1.1 - Initial release
Copyright (c) 2015 Attila Beregszaszi Licensed under the MIT license.