gulp插件gulp-file-include的模板复用功能

来源：互联网发布：淘宝发布完宝贝就下架编辑：程序博客网时间：2024/05/21 15:44

功能：当写一个后台时，会有导航条、头部和底部每个页面都相同，我们不可能每个页面都复制粘贴过来相同的代码，这样的话，如果后期导航条改了某个地方，那么我们需要改每个有导航条的地方，这样重复性的工作我们可以通过构建工具gulp的gulp-file-include插件避免掉

官方教程链接：https://www.npmjs.com/package/gulp-file-include(看不懂的话可以看下面教程)

示例如下：

目录结构 >>

header.html >>

<div class="header">    <p>头部</p>    <p>头部</p>    <p>头部</p></div>

footer.html >>

<div class="footer">    <p>@@footer1</p>    <p>@@footer2</p>    <p>@@footer.footer1</p>    <p>@@footer.footer2</p></div>

gulpfile.js >>

var gulp = require('gulp');var fileinclude  = require('gulp-file-include');gulp.task('fileinclude', function() {    gulp.src(['index.html', 'home.html'])        .pipe(fileinclude({          prefix: '@@',          basepath: '@file'        }))    .pipe(gulp.dest('./'));});gulp.task('default', ['fileinclude']);

index.html >>

<body>         @@include("src/header.html")    <div class="bodyer">        <p>身体</p>        <p>身体</p>        <p>身体</p>    </div>    <!-- 下面的传参一定要用双引号 -->    @@include("src/footer.html", {        "footer1": "index-footer1",        "footer2": "index-footer2",        "footer": {            "footer1": "index-footer-footer1",            "footer2": "index-footer-footer2"        }    })</body>

home.html >>

<body>         @@include('src/header.html')    <div class="bodyer">        <p>身体</p>        <p>身体</p>        <p>身体</p>    </div>    <!-- 下面的传参一定要用双引号 -->    @@include("src/footer.html", {        "footer1": "home-footer1",        "footer2": "home-footer2",        "footer": {            "footer1": "home-footer-footer1",            "footer2": "home-footer-footer2"        }    })</body>

1 0