@667/grunt-processhtml 中文文档教程
grunt-processhtml
在构建时处理 html 文件以根据发布环境修改它们
Looking for the stand-alone version?
Getting Started
这个插件需要 Grunt ^1.0.1
如果您以前没有使用过 Grunt,请务必查看 入门 指南,因为它解释了如何创建 Gruntfile 以及安装和使用 Grunt 插件。 一旦你熟悉了这个过程,你就可以用这个命令安装这个插件:
npm install grunt-processhtml --save-dev
一旦插件被安装,它可以在你的 Gruntfile 中用这行 JavaScript 启用:
grunt.loadNpmTasks('grunt-processhtml');
The "processhtml" task
使用特殊的处理 html
文件评论:
<!-- build:<type>[:target] [inline] [value] -->
...
<!-- /build -->
type
这是必需的。
类型:js
、css
、remove
、template
、include
或任何 html 属性如果这样写:[href]
、[src]
等。
target
这是可选的。
是您的 grunt 任务的目标名称,例如:dist
。 支持所有类型,因此您始终可以根据需要指定目标。
您可以传递多个以逗号分隔的目标,例如 并且将为每个目标解析块。
inline
此修饰符可用于 js
和 css
类型。
如果使用,样式或脚本将包含在输出 html 文件中。
value
类型必需:js
、css
、include
和 [attr]
。
可选类型:remove
、template
、js
和 css
带有 inline
修饰符的类型.
可以是文件名:script.min.js
或路径(如果指定了类似 [src]
的属性以保持原始文件名不变但替换其路径)。
Simple examples
build:js[:targets] [inline] <value>
将许多脚本标签替换为一个。
[:targets]
可选的构建目标。
inline
可选修饰符。
必需值:文件路径。
<!-- build:js app.min.js -->
<script src="my/lib/path/lib.js"></script>
<script src="my/deep/development/path/script.js"></script>
<!-- /build -->
<!-- changed to -->
<script src="app.min.js"></script>
您可以嵌入您的 javascript:
<!-- build:js inline app.min.js -->
<script src="my/lib/path/lib.js"></script>
<script src="my/deep/development/path/script.js"></script>
<!-- /build -->
<!-- changed to -->
<script>
// app.min.js code here
</script>
或
<!-- build:js inline -->
<script src="my/lib/path/lib.js"></script>
<script src="my/deep/development/path/script.js"></script>
<!-- /build -->
<!-- changed to -->
<script>
// my/lib/path/lib.js code here then...
// my/deep/development/path/script.js code goes here
</script>
build:css[:targets] [inline] <value>
将多个样式表链接标记替换为一个。
[:targets]
可选的构建目标。
inline
可选修饰符。
必需值:文件路径。
<!-- build:css style.min.css -->
<link rel="stylesheet" href="path/to/normalize.css">
<link rel="stylesheet" href="path/to/main.css">
<!-- /build -->
<!-- changed to -->
<link rel="stylesheet" href="style.min.css">
您可以像上面的 js
类型一样嵌入您的样式:
<!-- build:css inline -->
<link rel="stylesheet" href="path/to/normalize.css">
<link rel="stylesheet" href="path/to/main.css">
<!-- /build -->
<!-- changed to -->
<style>
/* path/to/normalize.css */
/* path/to/main.css */
</style>
或
<!-- build:css inline style.min.css -->
<link rel="stylesheet" href="path/to/normalize.css">
<link rel="stylesheet" href="path/to/main.css">
<!-- /build -->
<!-- changed to -->
<style>
/* style.min.css */
</style>
build:<[attr]>[:targets] <value>
更改属性的值。 在大多数情况下,使用 [src]
和 [href]
就足够了,但它适用于任何 html 属性。
<[attr]>
必需的 html 属性,即 [src]
、[href]
。
[:targets]
可选的构建目标。
所需值:路径、文件路径或任何字符串值
<!-- If only a path is used, the original file name will remain -->
<!-- build:[src] js/ -->
<script src="my/lib/path/lib.js"></script>
<script src="my/deep/development/path/script.js"></script>
<!-- /build -->
<!-- changed the src attribute path -->
<script src="js/lib.js"></script>
<script src="js/script.js"></script>
<!-- build:[href] img/ -->
<link rel="apple-touch-icon-precomposed" href="skins/demo/img/icon.png">
<link rel="apple-touch-icon-precomposed" href="skins/demo/img/icon-72x72.png" sizes="72x72">
<!-- /build -->
<!-- changed the href attribute path -->
<link rel="apple-touch-icon-precomposed" href="img/icon.png">
<link rel="apple-touch-icon-precomposed" href="img/icon-72x72.png" sizes="72x72">
<!-- build:[class]:dist production -->
<html class="debug_mode">
<!-- /build -->
<!-- this will change the class to 'production' only when the 'dist' build is executed -->
<html class="production">
build:include[:targets] <value>
包括外部文件。
[:targets]
可选的构建目标。
必需值:文件路径。
<!-- build:include header.html -->
This will be replaced by the content of header.html
<!-- /build -->
<!-- build:include:dev dev/content.html -->
This will be replaced by the content of dev/content.html
<!-- /build -->
<!-- build:include:dist dist/content.html -->
This will be replaced by the content of dist/content.html
<!-- /build -->
build:template[:targets]
使用 options.data 中的数据对象处理模板块。
[:targets]
可选的构建目标。
<!-- build:template
<p>Hello, <%= name %></p>
/build -->
<!--
notice that the template block is commented
to prevent breaking the html file and keeping it functional
-->
build:remove[:targets]
删除一个块。
[:targets]
可选构建目标
<!-- build:remove -->
<p>This will be removed when any processhtml target is done</p>
<!-- /build -->
<!-- build:remove:dist -->
<p>But this one only when doing processhtml:dist target</p>
<!-- /build -->
Overview
在项目的 Gruntfile 中,将名为 processhtml
的部分添加到传递到 grunt.initConfig()
的数据对象中。
grunt.initConfig({
processhtml: {
options: {
// Task-specific options go here.
},
your_target: {
// Target-specific file lists and/or options go here.
},
},
})
Options
options.process
类型:布尔值
默认值:false
通过grunt.template.process
处理整个html
文件,一个带有构建目标的默认对象将被传递给
{environment: target}
形式的模板,其中 environment 将是 grunt 任务的构建目标。
重要说明:如果您不想处理整个 html 文件,则不需要 process
选项。 看例子
在下面看到您可以处理模板块。
如果您确实想将整个文件作为模板处理,它将在编译内部模板块后进行编译 如果有的话。
options.environment
类型:<代码>对象
默认值:target
环境变量可以在注释中使用,它默认为任务目标。
options.data
类型:<代码>对象
默认值:{}
传递给 html
文件的对象 data
用于编译所有模板块和整个文件,如果 过程
是真的。
options.templateSettings
类型:<代码>对象
默认值:null
(将使用默认的 lodash 模板分隔符 <%
和 %>
)
定义 templateSettings
选项与 lodash templateSettings 选项来自定义
模板语法。
templateSettings: {
interpolate: /{{([\s\S]+?)}}/g // mustache
}
options.includeBase
类型:<代码>字符串
默认值:null
(将使用包含文件的路径)
指定一个可选路径来查找包含文件。 即,app/assets/includes/
options.commentMarker
类型:String
默认值:build
指定用于指示特殊开始/结束注释的词。 如果你想使用这个插件,这很有用
与使用类似的、冲突的 build:
注释的其他插件一起使用
(例如 grunt-usemin)。
将 options.commentMarker
设置为 process
后,典型的评论如下所示:
<!-- process:<type>[:targets] [value] -->
...
<!-- /process -->
options.strip
类型:Boolean
默认值:null
指定 true
将去除与当前目标不匹配的注释:
strip: true
options.recursive
类型:Boolean
默认值:false
递归处理使用 build:include
包含的文件。
recursive: true
options.customBlockTypes
类型:数组
默认值:[]
定义定义自定义块类型的 .js
文件数组。
customBlockTypes: ['custom-blocktype.js']
自定义块类型示例:
custom-blocktype.js
'use strict';
module.exports = function (processor) {
// This will allow to use this <!-- build:customBlock[:target] <value> --> syntax
processor.registerBlockType('customBlock', function (content, block, blockLine, blockContent) {
var title = '<h1>' + block.asset + '</h1>';
var result = content.replace(blockLine, title);
return result;
});
};
file.html
<!-- build:customBlock myValue -->
<p>This will be replaced with the result of the custom block above</p>
<!-- /build -->
结果将是
<h1>myValue</h1>
Usage Examples
Default Options
在您的 grunt 文件中设置任务,该任务将处理 索引。 html
文件并将输出保存到
dest/index.html
grunt.initConfig({
processhtml: {
options: {
data: {
message: 'Hello world!'
}
},
dist: {
files: {
'dest/index.html': ['index.html']
}
}
}
});
What will be processed?
按照前面的任务配置,index.html
可能如下所示:
<!doctype html>
<title>title</title>
<!-- build:[href] img/ -->
<link rel="apple-touch-icon-precomposed" href="my/theme/img/apple-touch-icon-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="my/theme/img/apple-touch-icon-72x72-precomposed.png" sizes="72x72">
<!-- /build -->
<!-- build:css style.min.css -->
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="main.css">
<!-- /build -->
<!-- build:js app.min.js -->
<script src="js/libs/require.js" data-main="js/config.js"></script>
<!-- /build -->
<!-- build:include header.html -->
This will be replaced by the content of header.html
<!-- /build -->
<!-- build:template
<p><%= message %></p>
/build -->
<!-- build:remove -->
<p>This is the html file without being processed</p>
<!-- /build -->
处理此文件后,输出将是:
<!doctype html>
<title>title</title>
<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-72x72-precomposed.png" sizes="72x72">
<link rel="stylesheet" href="style.min.css">
<script src="app.min.js"></script>
<h1>Content from header.html</h1>
<p>Hello world!</p>
Advanced example
在这个例子中有多个我们可以根据正在运行的目标处理 html 文件的目标。
grunt.initConfig({
processhtml: {
dev: {
options: {
data: {
message: 'This is development environment'
}
},
files: {
'dev/index.html': ['index.html']
}
},
dist: {
options: {
process: true,
data: {
title: 'My app',
message: 'This is production distribution'
}
},
files: {
'dest/index.html': ['index.html']
}
},
custom: {
options: {
templateSettings: {
interpolate: /{{([\s\S]+?)}}/g // mustache
},
data: {
message: 'This has custom template delimiters'
}
},
files: {
'custom/custom.html': ['custom.html']
}
}
}
});
待处理的index.html
(custom.html
如下):
<!doctype html>
<!-- notice that no special comment is used here, as process is true.
if you don't mind having <%= title %> as the title of your app
when not being processed; is a perfectly valid title string -->
<title><%= title %></title>
<!-- build:css style.min.css -->
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="main.css">
<!-- /build -->
<!-- build:template
<p><%= message %></p>
/build -->
<!-- build:remove -->
<p>This is the html file without being processed</p>
<!-- /build -->
<!-- build:remove:dist -->
<script src="js/libs/require.js" data-main="js/config.js"></script>
<!-- /build -->
<!-- build:template
<% if (environment === 'dev') { %>
<script src="app.js"></script>
<% } else { %>
<script src="app.min.js"></script>
<% } %>
/build -->
待处理的custom.html
:
<!doctype html>
<html>
<head>
<title>Custom template delimiters example</title>
</head>
<body>
<!-- build:template
{{ message }}
/build -->
</body>
</html>
Contributing
代替正式 文件styleguide,注意维护现有的编码风格。 为任何新的或更改的功能添加单元测试。 使用 Grunt 检查和测试您的代码。
Release History
- 0.4.1 node-htmlprocessor@0.2.4
- 0.4.0 Update Grunt to 1.0
- 0.3.13 node-htmlprocessor@0.2.3 and clone data object (#85)
- 0.3.12 Update node-htmlprocessor to version 0.2.2 (escape regex from remove)
- 0.3.11 get ready for grunt v1.0.0
- 0.3.10 Update node-htmlprocessor to version 0.2.1
- 0.3.9 Update node-htmlprocessor to version 0.2.0
- 0.3.8 Fix #74
- 0.3.7 Update node-htmlprocessor dependency with added
inline
modifier - 0.3.6 Update node-htmlprocessor version and add specific test for templates
- 0.3.5 Fixes issue when passing data to a
template
- 0.3.4 Fixes issue when passing a path te replace an
[attr]
- 0.3.3 Add node-htmlprocessor as a dependency
- 0.3.2 Fix/feature #39
- 0.3.1 Fix #35
- 0.3.0 Allow creating custom block types.
- 0.2.9 Added
recursive
option - 0.2.8 Changed
include
to not usereplace()
- 0.2.7 Added
commentMarker
option - 0.2.6 Fix #14 and added grunt-release
- 0.2.5 Create first tag using grunt-release
- 0.2.3 Fix #8
- 0.2.2 Small code refactor
- 0.2.1 Added
templateSettings
option tu customize template delimiters - 0.2.0 Added the
build:include
feature to include any external file - 0.1.1 Lint js files inside tasks/lib/
- 0.1.0 Initial release
你可能也喜欢
- 4chanapi 中文文档教程
- @0xcert/wanchain-order-gateway 中文文档教程
- @11tyrocks/eleventy-plugin-open-in-codepen 中文文档教程
- @1inch/1inch-solidity-utils 中文文档教程
- @2create/drone 中文文档教程
- @352inc/react-bootstrap-table2-paginator 中文文档教程
- @3test/ethereum-utils-contracts 中文文档教程
- @4geit/rct-store-builder 中文文档教程
- @59naga/babel-plugin-transform-string-raw 中文文档教程
- @9r3i/mfirebase 中文文档教程