Gulp实现html代码复用

最新推荐文章于 2022-01-14 12:09:48 发布

weixin_33749131

最新推荐文章于 2022-01-14 12:09:48 发布

阅读量257

点赞数

文章标签：后端 json

原文链接：https://juejin.im/post/5b42bc906fb9a04fc436a487

版权

平时我们看设计图的时候有一些部分是相同的，比如头部、底部、侧边栏之类；我们最原始的方法就是写完一个页面的，然后复制粘贴到其他页面。但是这样总感觉有些麻烦，有时修改代码还得一个个去改，稍不注意有可能就漏改了。

gulp就有这么一个插件gulp-file-include来解决这个问题（不了解gulp的同学先去了解）。它提供了一个include的方法让我们可以想后端模版一样把公共的部分分离出去，而且提供的include方法有许多配置项，想详细了解的可以去看看gulp-file-include。

下面我们写一个demo来了解怎么使用它。

建立一个文件夹并命名为gulp

安装gulp以及gulp-file-include。

cd gulp
npm install -g gulp //全局安装gulp
npm install  gulp --save-dev //在项目中安装gulp
npm install gulp-file-include --save-dev //安装 gulp-file-include 插件
复制代码

安装好之后，整理下文件的目录：

|-node_modules
|-temps // 公共部分的 html 存放文件夹
    |-*.html 
|-page // 生产环境的 html 存放文件夹
    |-*.html 
|-dist // 编辑后的 html 文件
gulpfile.js
package.json
复制代码

在新建的gulpfile.js，配置好gulp-file-include

var gulp = require('gulp');
var fileinclude = require('gulp-file-include');

gulp.task('fileinclude', function () {
    gulp.src('pages/*.html')
        .pipe(fileinclude({
            prefix: '@@',
            basepath: '@file'
        }))
        .pipe(gulp.dest('dist'));
});
复制代码

在temps目录下新建三个html文件

meta.html:

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试文件引入</title>
<meta name="keywords" content="aa,bb,cc,dd,ee,ff">
<meta name="description" content="1234567890">
<link rel="icon" sizes="any" mask="" href="" />
<link rel="stylesheet" type="text/css" href="/dist/css/common.css" />
<meta name="format-detection " content="telephone=no">
复制代码

header.html

<div class='menu'>
    <ul>
        <li><a href="/index.html">首页</a></li>
        <li><a href="/trade-news.html">行业新闻</a></li>
        <li><a href="/product.html">公司产品</a></li>
        <li><a href="/contact.html">联系我们</a></li>
    </ul>
</div>
复制代码

footer.html

<div>这是footer部分</div>
复制代码

最后在page目录下新建一个index.html，把要用到的meta、header、footer给include进来。

<!DOCTYPE html>
<html lang="en">
<head>
@@include('../temps/meta.html')

</head>
<body>
@@include('../temps/header.html')
<div>首页</div>
@@include('../temps/footer.html')
</body>
</html>
复制代码

最后回到命令行工具里，执行: gulp fileinclude

然后在dist目录下，相应编译好的html文件都在该目录下

全文到这里就结束了，希望对有需要的小伙伴有所帮助！