a gulp-html-include plugin
- [x] 引入html文件，支持<?html>、<style></style>、<script></script>
- [ ] 传递参数，emit通信
github下载
git clone "https://github.com/dingjiamughal/gulp-html-include.git"
npm下载
npm install gulp-html-include --save-dev
在 gulpfile.js中引入:
var htmlInclude = require('gulp-html-include');
gulp.task('include', function () {
gulp.src(srcPath + 'view/**/*.html')
.pipe(htmlInclude('template/**/*.html'))
.pipe(gulp.dest(prdPath+'view'));
});
//监听文件热更新
gulp.watch(srcPath + 'views/**/*.html', ['include']);
|
-- views
| |
| -- index.html
| |
| |
-- template
| |
| -- header.html
| |
| -- footer.html
|
|
-- gulpfile.js
Html files:
<!-- index.html -->
<body>
@include "header.html"
<p>Hello World</p>
@include "footer.html"
</body>
In your index.html, you should use
@include "XXX.html"
to include your components in dir---template.
<!-- header.html -->
<h1>I am the header</h1>
<!-- footer.html -->
<h1>I am the footer</h1>
gulp include
<!-- 打包之后的效果 -->
<body>
<h1>I am the header</h1>
<p>Hello World</p>
<h1>I am the footer</h1>
</body>
Type: String
template中引用的文件路径
Copyright © 2017 dingjia