Embed CSS into HTML file with Grunt

Question

I need to replace tags in HTML file like this:

<link type="text/css" rel="stylesheet" href="template.css">

With the following:

<style type="text/css"> { /* content of template.css */ } </style>

Using Grunt .

What is the best way of achieving this?

Answer 1

Convert your HTML file to a Twig template. Embed your CSS file with {% include %} operator. Then use consolidate.js with atpl.js through grunt-consolidate plugin to compile it.

Twig is used in Symfony2 project and based on Django template language and is one of the most elegant and powerful ones for server-side compilation.

If you want you can use another compiler with include functionality, cause Consolidate , supports lots of them .

See the provided links for more details.