将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-dev5,文件夹介绍|-node_modules|-page // 生产环境的 html 存放文件夹|-include // 公共部分的 html 存放文件夹 //header.html;footer.html|-*.html //layout.html|-dist // 编辑后的 html 文件 //生成layout.htmlgulpfile.js6,在新建的
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:
相关文章推荐
- 前后端分离中,gulp实现头尾等公共页面的复用 前言
- 前后端分离中,Gulp实现头尾等公共页面的复用
- gulp实现公共html代码复用
- 使用html-loader实现页面公共部分复用的功能
- js实现加载公共html页面
- Gulp实现SASS、HTML的监控和自动编译以及页面的自动刷新
- springboot 整合 MongoDB 实现登录注册,html 页面获取后台参数的方法
- 用html、jquery、php编写新闻后台管理页面,动态添加新闻数据并实现数据的增删改查功能
- html 页面自动跳转的五种实现方法
- html+css+js实现火影背景切换登录页面
- html页面js实现多个div定时轮流出现
- HTML+TIME2,纯HTML实现页面动画效果。
- 一段实现HTML页面内定期触发事件的JavaScript代码
- 让html页面不缓存js的实现方法
- HTML页面滚动时获取离页面顶部的距离2种实现方法
- HTML页面自动跳转的五种实现方法
- 使用PHP实现生成HTML静态页面
- Java 实现HTML 页面转成image 图片
- 基于HTML实现表单提交后不刷新页面
- 使用js实现不同终端引入不同的html页面css样式js等