gulp-style-inject

style-inject plugin for gulp

Usage

First, install gulp-style-inject as a development dependency:

npm install --save-dev gulp-style-inject

Then, add it to your gulpfile.js:

var styleInject = require("gulp-style-inject");

gulp.src("./src/*.html")
	.pipe(styleInject())
	.pipe(gulp.dest("./dist"));

All your html files should include the following tag:

    <!-- inject-style src="./path/file.css" -->

Example:

<div>
<!-- inject-style src="./test/p.css" -->
<!-- inject-style src="./test/span.css" -->
    <p>Some text</p>
    <span>Some other text</span>
</div>

Output

<div>
<style>
p {
    background-color: red;
}
</style>
<style>
span {
    background-color: green;
}
</style>
    <p>Some text</p>
    <span>Some other text</span>
</div>

Options

The plugin can be used with an options object

var styleInject = require("gulp-style-inject");

gulp.src("./src/*.html")
	.pipe(styleInject({
		encapsulated: false,
		path: './test/styles'
	}))
	.pipe(gulp.dest("./dist"));

Available options:

• encapsulated: Type boolean, (default: true) - Specifies if the style code should be injected using a style tag
• path: Type string, (default: '') - Specifies the base path of all style files
• match_pattern: Type regular expression, (default: <\!--\sinject-style\s(.?)\s-->) - Specifies the pattern to look for when replacing

License

MIT License