grunt-processhtml的根据环境打包使用方法，干货
葛宪
安装：
npm install grunt-processhtml --save-dev
gruntFils:引用
grunt.loadNpmTasks('grunt-processhtml');
html模板中处理特殊注释符的代码片段：
<!-- build:<type>[:target] [inline] [value] -->
...
<!-- /build -->
type: 类型， include css、js、remove or attrbute, attrbute include [href] [src]
inline: 可选择修饰符，链接解析成源码注入
value: 文件生成目标路径
举几个例子就看明白了：
例子一：重命名及路径特性
// index.html
<!-- build:css dist/css/editor.css -->
<link rel="stylesheet" href="/css/index.css">
<!-- /build -->
// run 完成后
<link rel="stylesheet" href="/css/editor.css">
例子二：修饰符的作用
// index.html
<!-- build:css inline -->
<link rel="stylesheet" href="/css/index.css">
<!-- /build -->
// run 完成后
<style>
.km-btn-group,.km-btn-item .km-btn-caption,.km-btn-item .km-btn-icon{vertical-align:middle;display:inline-block}#previewer-content pre,.gfm-render pre,.km-editor>.receiver{word-break:break-all;word-wrap:break-word}.km-editor{overflow:hidden;z-index:2}.km-editor>.mask{display:block;position:absolute;left:0;right:0;top:0;bottom:0;background-color:transparent}.km-editor>.receiver{position:absolute;background:#fff;outline:0;box-shadow:0 0 20px rgba(0,0,0,.5)...
</style>
例子三：合并功能
<!-- build:css style.min.css -->
< link rel =" stylesheet " href =" path/to/normalize.css " >
< link rel =" stylesheet " href =" path/to/ main.css" css " >
<!-- /build -->
// run 完成后
< link rel =" stylesheet " href =" style.min.css " >
例子四：合并后注入成代码片段
<!-- build:css inline style.min.css -->
< link rel =" stylesheet " href =" path/to/normalize.css " >
< link rel =" stylesheet " href =" path/to/main .css " >
<!-- /build -->
// run 完成后合并为一个代码片段注入
< style >
/* style.min.css */ --> normalize.css + main .css
mask{display:block;position:absolute;left:0;right:0;top:0;bottom:0;background-color:transparent}.km-editor>.receiver{position:absolute;background:#fff;outline:0;box-shadow:0 0 20px rgba(0,0,0,.5)...
</ style >
例子四：合并后注入成代码片段
<!-- build:css inline style.min.css -->
< link rel =" stylesheet " href =" path/to/normalize.css " >
< link rel =" stylesheet " href =" path/to/main .css " >
<!-- /build -->
// run 完成后合并为一个代码片段注入
< style >
/* style.min.css */ --> normalize.css + main .css
mask{display:block;position:absolute;left:0;right:0;top:0;bottom:0;background-color:transparent}.km-editor>.receiver{position:absolute;background:#fff;outline:0;box-shadow:0 0 20px rgba(0,0,0,.5)...
</ style >
例子五：remove
<!-- build:css remove -->
< link rel =" stylesheet " href =" path/to/normalize.css " >
< link rel =" stylesheet " href =" path/to/main .css " >
<!-- /build -->
// run 完成后已删除
例子六：href 和src属性
build:<[attr]> [:targets] [value]
attr: 必需的 html 属性，src or href
targets: 可选的构建目标。
value: 文件路径
<!-- build:img /js -->
< script src =" my/lib/path/lib.js " > </ script >
<!-- /build -->
// run 完成后
< script src ="js/lib.js " > </ script >
<!-- build:img /js -->
< script src =" my/lib/path/lib.js " > </ script >
<!-- /build -->
// run 完成后
< script src ="js/lib.js " > </ script >
<!-- build:[class]:dist production -->
< html class =" debug_mode " >
<!-- /build -->
<!-- 只有在执行 'dist' 构建时，才会将类更改为 'production' -->
< html class =" production " >
自定义功能：
// gruntFiles.js
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']
}
}
}
});
运行后：
<!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 -->
类似资料：