Automate inserting stylesheet into HTML - html

Question

How do I automate turning something like ...
<link rel="stylesheet" href="css/main.css">
... into something like ...
<style>
/* lotsa CSS rules */
</style>
... in an HTML document?
I currently do it manually. I also use a postCSS with a bunch of plugins. So, I start with a separate CSS file and I use a link tag initially. When I'm done working on the CSS, I comment out the link tag and add a style tag and copy all of the CSS into the document. Vim makes this a little easier:
:read css/main.css
I already use gulp for automating some of my workflow, so I prefer a solution that can be easily integrated with that.
Gulp has been a great benefit for me, but I might not understand enough about how it works. I tried searching the plugins and I found too many that look like they'll do what I want. Some of them seem to process the CSS and HTML to add style tags to the individual elements, which is not what I want.
gulp-smoosher
gulp-css-inliner
gulp-inline

Answer 1

It looks like Grunt has a task for this. Check out the github repo here.
Install the plugin:
npm install grunt-inline --save-dev
Enable the plugin inside your gruntfile:
grunt.loadNpmTasks('grunt-inline');
In your project's Gruntfile, add a section named inline to the data object passed into grunt.initConfig().
grunt.initConfig({
inline: {
dist: {
src: 'src/index.html',
dest: 'dist/index.html'
}
}
})
Which should turn this:
<link href="css/style.css?__inline=true" rel="stylesheet" />
Into this:
<style>
/* contents of css/style.css */
</style>`