https://github.com/bezoerb/grunt-critical

Grunt task to extract & inline critical-path CSS from HTML
https://github.com/bezoerb/grunt-critical

above-the-fold critical-css critical-path grunt

Last synced: 24 days ago
JSON representation

Grunt task to extract & inline critical-path CSS from HTML

• Host: GitHub
• URL: https://github.com/bezoerb/grunt-critical
• Owner: bezoerb
• License: other
• Created: 2014-07-23T07:34:12.000Z (over 10 years ago)
• Default Branch: main
• Last Pushed: 2023-02-13T17:36:34.000Z (almost 2 years ago)
• Last Synced: 2024-04-14T17:40:43.560Z (9 months ago)
• Topics: above-the-fold, critical-css, critical-path, grunt
• Language: HTML
• Size: 3.36 MB
• Stars: 154
• Watchers: 7
• Forks: 24
• Open Issues: 20
• Metadata Files:
  • Readme: README.md
  • Changelog: History.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# grunt-critical

Grunt plugin to extract & inline critical-path CSS from HTML

[![NPM version][npm-image]][npm-url]

[![Build Status][ci-image]][ci-url]

[![Dependency Status][depstat-image]][depstat-url]

## Getting Started

If you haven't used [Grunt](https://gruntjs.com/) before, be sure to check out the [Getting Started](https://gruntjs.com/getting-started) guide, as it explains how to create a [Gruntfile](https://gruntjs.com/sample-gruntfile) as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

```shell

npm install grunt-critical --save-dev

```

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

```js

grunt.loadNpmTasks('grunt-critical');

```

## Critical task

_Run this task with the `grunt critical` command._

Task targets, files and options may be specified according to the grunt [Configuring tasks](https://gruntjs.com/configuring-tasks) guide.

Generate critical path css and inline it with [critical](https://github.com/addyosmani/critical).

### Usage

Use the `grunt-critical` task by specifying a target destination (file) for your critical CSS. Below this is `test/generated/critical.css`.

Along-side, specify the input HTML file you would like scanned as well as the width and height of the critical viewport.

In this case `test/fixture/index.html`.

```js

critical: {

    test: {

        options: {

            base: './',

            css: [

                'test/fixture/styles/main.css',

                'test/fixture/styles/bootstrap.css'

            ],

            width: 320,

            height: 70

        },

        src: 'test/fixture/index.html',

        dest: 'test/generated/critical.css'

    }

}

```

If the `dest` file is a stylesheet, the resulting critical-path css is saved to this file for later use.

If `dest` points to an Markup file (HTML, PHP, etc.) the resulting CSS gets inlined and the exiting stylesheets are

wrapped in a javascript function to load them asynchronously as well as a `noscript` block for users with JavaScript disabled

```js

critical: {

    test: {

        options: {

            base: './',

            css: [

                'test/fixture/styles/main.css',

                'test/fixture/styles/bootstrap.css'

            ],

            width: 320,

            height: 70

        },

        src: 'test/fixture/index.html',

        dest: 'test/generated/index-critical.html'

    }

}

```

## Options

For a full list of options see [critical](https://github.com/addyosmani/critical#options)

## License

(C) Ben Zörb 2014, released under an MIT license

[npm-url]: https://npmjs.org/package/grunt-critical

[npm-image]: https://badge.fury.io/js/grunt-critical.svg

[ci-url]: https://github.com/bezoerb/grunt-critical/actions?workflow=Tests

[ci-image]: https://github.com/bezoerb/grunt-critical/workflows/Tests/badge.svg

[depstat-url]: https://david-dm.org/bezoerb/grunt-critical

[depstat-image]: https://david-dm.org/bezoerb/grunt-critical.svg