gulp-inline-css中文文档|gulp-inline-css js中文教程|解析

npm npmdoc 3年前 (2021-12-03) 476次浏览

gulp-inline-css中文文档|gulp-inline-css js中文教程|解析

安装命令:npm i gulp-inline-css

吞咽-内联-css构建状态 覆盖状态

新产品管理

将您的 CSS 属性内联到stylehtml 文件中属性中。对电子邮件有用。

受到 grunt 插件grunt-inline-css 的启发使用inline-css模块。

3.0 有什么新东西?

这个怎么运作

这个 gulp 插件接受一个 html 文件并将 CSS 属性内联到 style 属性中。

/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;
}

输出:

<html>
<head>
</head>
<body>
  <p style="color: red; text-decoration: underline;">Test</p>
</body>
</html>

这有什么用?

  • HTML 电子邮件。有关支持的选择器的完整列表,请参见
    此处
  • 在第 3 方网站中嵌入 HTML。
  • 表现。下载外部样式表会延迟页面在浏览器中的呈现。内联 CSS 加快了这个过程,因为浏览器不必等待下载外部样式表来开始呈现页面。

安装

使用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/'));
});

有选项:

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/'));
});

选项直接传递给inline-css

应用程序接口

inlineCss(选项)

options.extraCss

类型:String

默认:
""

要应用于文件的额外 css。

options.applyStyleTags

类型:Boolean

默认:
true

是否在<style></style>.

options.applyLinkTags

类型:Boolean

默认:
true

是否解析<link rel="stylesheet">标签并内联生成的样式。

options.removeStyleTags

类型:Boolean

默认:
true

是否<style></style>在(可能)从它们内联 css 之后删除原始标签。

options.removeLinkTags

类型:Boolean

默认:
true

是否<link rel="stylesheet">在(可能)从它们内联 css 之后删除原始标签。

选项.url

类型:String

默认:
filePath

如何解决href。必需的

options.preserveMediaQueries

类型:Boolean

默认:
false

<style></style>removeStyleTagsis时,保留标签内的所有媒体查询(和包含的样式)作为细化true删除了其他样式。

options.applyWidthAttributes

类型:Boolean

默认:
false

是否使用任何 CSS 像素宽度width在元素上创建属性。

options.applyTableAttributes

类型:Boolean

默认:
false

是否将border,cellpaddingcellspacing属性应用于table元素。

options.removeHtmlSelectors

类型:Boolean

默认:
false

是否从标记中删除classid属性。

options.codeBlocks

类型:Object

默认:
{ EJS: { start: '<%', end: '%>' }, HBS: { start: '{{', end: '}}' } }

一个对象,其中每个值都有一个startend来指定在解析和内联过程中应该被忽略的受保护的代码块。例如,把手 (hbs) 模板是HBS: {start: '{{', end: '}}'}. codeBlocks可以解决内联 css 可能将代码解释<=为 HTML 之类的问题,而当它是模板语言代码时。请注意,这codeBlocks是一个可以包含许多不同代码块的字典,所以不codeBlocks: {...}要这样做codeBlocks.myBlock = {...}

特殊标记

数据嵌入

当标签上存在数据嵌入属性时,inline-css 不会内联样式并且不会删除标签。

这可用于将依赖 css 选择器的电子邮件客户端支持技巧嵌入到您的电子邮件模板中。

啦啦队选项

传递给cheerio的选项

执照

麻省理工学院 © Jonathan Kemp

项目贡献人员列表:


极客公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:gulp-inline-css中文文档|gulp-inline-css js中文教程|解析
喜欢 (0)
.excerpt .focus {display:none}