1.2.0 • Published 8 years ago
gulp-html-build v1.2.0
#实现基于gulp的HTML模块化
开发方式
###示例 https://github.com/catezhao1985/gulp-html-build.git
###gulp中的主要代码如下:
###引入库
var htmlInsert = require('gulp-html-build').htmlInsert;
var htmlRename = require('gulp-html-build').htmlRename;
###通过模板生成html页面
gulp.task('insert',function() {
return gulp.src('src/*.html')
.pipe(htmlInsert({src:"src/public/"}))
.pipe(gulp.dest('build'));
});
gulp.task('default', ['insert'], function() {
return gulp.src('build/*.html')
.pipe(htmlRename());
});
###src/index1--ielts.html (以--后的变量为key)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="foot">
// 模板来自于public下的文件
<!--{{foot.html}}-->
</div>
</body>
</html>
###src/public/foot.html
<div class="foot-area">
<div class="foot-banner">
<a href="#"><img src="images/foot-ad.jpg" atl="" title="" /></a>
</div>
<div class="foot-border-bottom-line">
<div class="foot-a-cont">
<div class="foot-links-title">友情链接</div>
<div class="clearfix">
<div class="set-links-cont-width <!--{{toefl=active}}--> <!--{{ielts=aaa}}--> <!--{{toefl=ccc ddd}}-->"><a href="#" >雅思考试</a></div>
<div class="set-links-cont-width <!--{{ielts=active}}-->"><a href="#" >托福培训</a></div>
<div class="set-links-cont-width <!--{{toefl=test.html}}-->"><a href="#" >牛校网</a></div>
</div>
</div>
</div>
</div>
1.2.0
8 years ago
1.1.9
8 years ago
1.1.8
8 years ago
1.1.7
8 years ago
1.1.6
8 years ago
1.1.5
8 years ago
1.1.4
8 years ago
1.1.3
8 years ago
1.1.2
8 years ago
1.1.1
8 years ago
1.1.0
8 years ago
1.0.9
8 years ago
1.0.8
8 years ago
1.0.7
8 years ago
1.0.6
8 years ago
1.0.5
8 years ago
1.0.4
8 years ago
1.0.3
8 years ago
1.0.2
8 years ago
1.0.1
8 years ago