1.0.5 • Published 7 years ago
gulp-html-helper v1.0.5
gulp-html-helper
Install
npm install --save-dev gulp-html-helper
Usage
ps:htmlHelper只处理相对路径的引用连接
var gulp = require('gulp');
var htmlHelper = require('gulp-html-helper');
var option = {
staticPath: '_devTmp/static',
urlBasePath: 'static/',
aliasPath: {'originalPath':'aliasPath'},
md5:true
}
gulp.task('default', function () {
return gulp.src('src/*.html')
.pipe(htmlHelper(option))
.pipe(gulp.dest('dist'));
});
Option
- staticPath: html里面引用的静态资源被输出的目的目录(必填项)
- urlBasePath:html里面引用的静态资源链接的公共路径(默认为'/')
- aliasPath:处理前,将HTML里面的静态资源引用链接做指定替换处理,遇到链接中有「originalPath」则先替换为「aliasPath」(不设置,则不做替换处理)
- rootPathIMG:图片资源跟路径,要求以相对路径格式书写(默认为程序运行路径)
- rootPathCSS:CSS资源跟路径,要求以相对路径格式书写(默认为程序运行路径)
- rootPathJS:JS资源跟路径,要求以相对路径格式书写(默认为程序运行路径)
- md5:处理链接时,是否加上md5
Example
option配置如下
var option = {
staticPath: '_devTmp/static',
urlBasePath: 'static/',
aliasPath: {'originalPath':'aliasPath'},
md5:true
}
处理前的html
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="x-ua-compatible" content="ie=edge"/>
<title>react-babel</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="../cssStyle/aa.css">
</head>
<body>
<div id="app"></div>
<a href="/a/s"></a>
<img src="../img/pic20160106.jpg">
<script src="https://static.qbox.me/webClint/jsPlugins/plugins/for_react_babel/react-with-addons.min.js"></script>
<script src="https://static.qbox.me/webClint/jsPlugins/plugins/for_react_babel/react-dom.min.js"></script>
<script src="/jsEntries/index.js"></script>
<script src="../jsEntries/index.js"></script>
</body>
</html>
处理后的html
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="x-ua-compatible" content="ie=edge"/>
<title>react-babel</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="static/aa-d555e48d71746b90d810522ae7445f45.css">
</head>
<body>
<div id="app"></div>
<a href="/a/s"></a>
<img src="static/5df5003623c86ad78e83fb55f825f008.jpg">
<script src="https://static.qbox.me/webClint/jsPlugins/plugins/for_react_babel/react-with-addons.min.js"></script>
<script src="https://static.qbox.me/webClint/jsPlugins/plugins/for_react_babel/react-dom.min.js"></script>
<script src="/jsEntries/index.js"></script>
<script src="static/index-596eb908f90deafc0ab196444e478eb1.js"></script>
</body>
</html>
staticPath指定Path:_devTmp/static下的静态文件
- 5df5003623c86ad78e83fb55f825f008.jpg
- aa-d555e48d71746b90d810522ae7445f45.css
- index-596eb908f90deafc0ab196444e478eb1.js
##Todo
小的图片直接base64