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

最新推荐文章于 2024-06-13 09:50:19 发布

vcxiaohan2

最新推荐文章于 2024-06-13 09:50:19 发布

阅读量9.8k

点赞数 1

分类专栏：前端工具

本文链接：https://blog.csdn.net/u011500781/article/details/52311763

版权

前端工具专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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