gulp中使用 gulp-file-include 可以使html中包含其他的文件内容,
避免重复多次写网页上相同的部分,将来要修改起来也需要多长改动,非常不方便。
例如:需要在手机网页应用中,首页的页脚部分增加下方的固定的导航栏
在 index.html中增加如下内容
<div data-role="page" id="page1">
@@include('./html/include/navbar.html')
</div>
同时在 ./html/include/navbar.html 目录下新增 navbar.html文件
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>
<a data-icon="home" href="index.html" class="ui-btn-active ui-state-persist">首页</a>
</li>
<li><a data-icon="alert" href="alert.html">通讯录</a></li>
<li><a data-icon="user" href="user.html">我的信息</a></li>
</ul>
</div>
</div>
这样则实现了在index.html中引用通用的navbar.html
另外,需要安装 gulp-file-include的引用
npm install gulp-file-include –save-dev
在gulpfile.js中增加如下内容:
var fileinclude = require('gulp-file-include');
gulp.task('fileinclude', function() {
return gulp.src(HTML_ROOT_DEST+'/*.html')
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest(HTML_ROOT_DEST));
});