A Grunt plugin to inline a selected CSS file. Ideal for inlining critical CSS.
This will take a HTML stylesheet link and inline the target CSS.
This means that:
<link rel="stylesheet" href="/css/stylesheet.css" data-inline="true">
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-inlinestyles --save-dev
In your project's Gruntfile, add a section named
inlinestyles to the data object passed into
A string value that is used to indicate the root of your website. 'Absolute' CSS links are relative to this value.
A boolean that is used to turn minification of the inlined CSS on or off.
A string value that is used to designate a CSS link that is to be inlined.
In this example, the default options are used to inline CSS inside
source.html. So if the
source.html file has the content
<link rel="stylesheet" href="/css/stylesheet.css" data-inline="true"> the generated result would contain
In this example, custom options are used to specify a new basepath, disable CSS minification and to add a new inlining tag.
Contributions are welcome! Hit me up via @sonniesedge
v0.0.1 Initial release
Copyright (c) 2014 . Licensed under the MIT license.