在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):jonkemp/gulp-inline-css开源软件地址(OpenSource Url):https://github.com/jonkemp/gulp-inline-css开源编程语言(OpenSource Language):JavaScript 83.5%开源软件介绍(OpenSource Introduction):gulp-inline-css
Inspired by the grunt plugin grunt-inline-css. Uses the inline-css module. What's new in 3.0?
How It WorksThis gulp plugin takes an html file and inlines the CSS properties into the style attribute.
<html>
<head>
<style>
p { color: red; }
</style>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Test</p>
</body>
</html>
p {
text-decoration: underline;
} Output: <html>
<head>
</head>
<body>
<p style="color: red; text-decoration: underline;">Test</p>
</body>
</html> What is this useful for ?
InstallInstall with npm
Usagevar 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 inline-css. APIinlineCss(options)options.extraCssType: Extra css to apply to the file. options.applyStyleTagsType: Whether to inline styles in options.applyLinkTagsType: Whether to resolve options.removeStyleTagsType: Whether to remove the original options.removeLinkTagsType: Whether to remove the original options.urlType: How to resolve hrefs. Required. options.preserveMediaQueriesType: Preserves all media queries (and contained styles) within options.applyWidthAttributesType: Whether to use any CSS pixel widths to create options.applyTableAttributesType: Whether to apply the options.removeHtmlSelectorsType: Whether to remove the options.codeBlocksType: An object where each value has a Special markupdata-embedWhen a data-embed attribute is present on a <style></style> tag, inline-css will not inline the styles and will not remove the <style></style> tags. This can be used to embed email client support hacks that rely on css selectors into your email templates. cheerio optionsOptions to passed to cheerio. LicenseMIT © Jonathan Kemp |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论