您的位置:首页 > Web前端 > HTML

将html分为头尾后打包整合,Gulp实现头尾等公共页面的复用

2018-03-22 16:19 465 查看
安装gulp的前提是你已经有了nodejs的运行环境1,新建项目:mkdir gulp-file && cd gulp-file2,初始化一下npm init3,全局安装gulp:npm install -g gulp4,在每个要使用gulp的项目中都单独安装一次:
npm install gulp --save-dev
5,文件夹介绍|-node_modules|-page // 生产环境的 html 存放文件夹|-include // 公共部分的 html 存放文件夹 //header.html;footer.html|-*.html //layout.html|-dist // 编辑后的 html 文件 //生成layout.htmlgulpfile.js
6,在新建的
gulpfile.js
,配置好
gulp-file-include
var gulp = require('gulp');var fileinclude  = require('gulp-file-include');gulp.task('fileinclude', function() {// 适配page中所有文件夹下的所有html,排除page下的include文件夹中htmlgulp.src(['page/**/*.html','!page/include/**.html']).pipe(fileinclude({prefix: '@@',basepath: '@file'})).pipe(gulp.dest('dist'));});
接着新建两个
html
文件,分别是头部和底部:header.html
<h1>这是 header 的内容</h1>
footer.html
<h1>这是 footer 的内容</h1>
最后在新建一个
html
,把要用到的
header
footer
include
进来。layout.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body>@@include('include/header.html')<p> 这是 layout 的内容 </p>@@include('include/footer.html')</body></html>
最后回到命令行工具里,执行
gulp fileinclude
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: