gulp-inline-css 
Inline your CSS properties into the
styleattribute in an html file. Useful for emails.
Inspired by the grunt plugin grunt-inline-css. Uses the juice library.
This gulp plugin takes an html file and inlines the CSS properties into the style attribute.
/path/to/file.html:
<html>
<head>
<style>
p { color: red; }
</style>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Test</p>
</body>
</html>style.css
p {
text-decoration: underline;
}Output:
<html>
<head>
</head>
<body>
<p style="color: red; text-decoration: underline;">Test</p>
</body>
</html>- HTML emails. For a comprehensive list of supported selectors see here
- Embedding HTML in 3rd-party websites.
Install with npm
npm install --save-dev gulp-inline-css
var gulp = require('gulp'),
inlineCss = require('gulp-inline-css');
gulp.task('default', function() {
return gulp.src('./*.html')
.pipe(inlineCss())
.pipe(gulp.dest('build/'));;
});With options:
var gulp = require('gulp'),
inlineCss = require('gulp-inline-css');
gulp.task('default', function() {
return gulp.src('./*.html')
.pipe(inlineCss({
applyStyleTags: true,
applyLinkTags: true,
removeStyleTags: true,
removeLinkTags: true
}))
.pipe(gulp.dest('build/'));;
});Options are passed directly to juice.
Type: String
Default: ""
Extra css to apply to the file.
Type: Boolean
Default: true
Whether to inline styles in <style></style>.
Type: Boolean
Default: true
Whether to resolve <link rel="stylesheet"> tags and inline the resulting styles.
Type: Boolean
Default: true
Whether to remove the original <style></style> tags after (possibly) inlining the css from them.
Type: Boolean
Default: true
Whether to remove the original <link rel="stylesheet"> tags after (possibly) inlining the css from them.
Type: String
Default: filePath
How to resolve hrefs.
MIT © Jonathan Kemp