html调用头尾html,合并html头尾 - 基础支持 - 用gulp搭建前后分离的开发环�? - KK的小故事...
基础支持 - 合并html头尾 ¶
作者:KK
发表日期:2016.6.23
合并头尾的模块其实也有只是没有我心仪的,所以自己做了一个gulp插件叫gulp-layout,我暂时还没发布到npm上所以麻烦你手动下载安装,下载地址是 http://pan.baidu.com/s/1qYN8fnu
下载后解压到项目的node_modules下就算是将模块安装完成了
先编写头部和尾部代码 ¶
在前端src代码目录下创建一个_common目录,里面再建一个layout.html的文件(默认要是UTF-8无BOM格式),里面写上这样的代码:
网站
导航1
导航2
导航3
{{content}}
关于谁? 粤ICP备1234号? 电话110你打不打过来?
接下来到调用代码示例 ¶var layout = require('gulp-layout');
gulp.src('./src/**/**.html')
.pipe(layout.run())
.pipe(gulp.dest('./dist'));
于是当你在src/index.html里写随便几个字符后,就会在dist/index.html里产生带有头部尾部的代码内容了
那其实插件原理很明显,就是将src/index.html里的内容读取出来后,替换掉src/_common/layout.html里的{{content}}这部分再部署到dist目录下就好了
*注意:除了_common/layout.html,默认其它所有html文件在修改时都会和layout.html合并
不同文件使用不同的layout ¶
虽然网站通常都有共同的头部和尾部,但也有时候是某一模块用另一套头部和尾部的,这里插件也可以支持,上代码:
var layout = require('gulp-layout');
layout.config({
layouts : [
{
layoutFile : '_common/layout2.html',
files : [
'login.html',
'center.html',
'register.html'
]
}
]
});
gulp.src('./src/**/**.html')
.pipe(layout.run())
.pipe(gulp.dest('./dist'));
其实就是执行config方法说明3个文件要使用_common/layout2.html,另外当然还要创建layout2.html啦,其中你可以不用_common目录,自己另外设一个比如my-layouts/layout2.html也可以
以上config执行后,只有login.html、register.html和center.html三个文件会合并到_common/layout2.html,其它未声明的文件都会默认合并到_common/layout.html
多套文件多套layout ¶layout.config({
layouts : [
{//第一套layout配置
layoutFile : '_common/layout1.html',
files : [
'login.html',
'center.html',
'register.html'
]
},
{//第二套layout配置
layoutFile : '_common/layout2.html',
files : [
'friend/list.html',
'goods/card/pay.html'
]
},
{//第三套layout配置
layoutFile : 'layoutPathXX/layout3.html',
files : [
'qqq.html',
'xxx.html',
'yyy.html',
'zzz.html'
]
}
]
});
这神马意思?我想你懂的,那其它没声明的都用_common/layout.html的了,其中所有layout文件被编辑时都不会合并,因为它们自身就是layout,还找谁合并呢对吧?
反之,如果
layout.config({
layouts : [
{
layoutFile : '_common/layout.html', //注意这个路径,不就是默认那个layout文件吗
files : [
'login.html',
'center.html',
'register.html'
]
}
]
});
这样也只有这三个页面用_common/layout.html了,其它页面都不会使用layout
只要个别文件不需要layout ¶
通常还有一种情况就是一些活动页面或者特殊的页面是没有公共的头尾的,这只这些页面是个性化的独立页面,配置办法就是
layout.config({
layouts : [
{
layoutFile : '', //这里设空
files : [
'login.html',
'center.html',
'register.html'
]
}
]
});
于是就变成了只有这三个页面不用layout,而其它页面全部会默认查找_common/layout.html去合并
自定义源代码目录 ¶
以上都是基于前端源代码在src目录下的,这是一个默认的状态,其实可以自定义其它源代码目录,配置方法是:
layout.config({
workingPath : './src2'
});
这默认会去查找./src2/_common/layout.html了
自定义文件编码 ¶
本文开头说过layout文件默认使用UTF-8无BOM格式,要修改的话则是:
layout.config({
charset : 'gbk'//默认是 utf8
});
html调用头尾html,合并html头尾 - 基础支持 - 用gulp搭建前后分离的开发环�? - KK的小故事...相关推荐
- HTML页面查看world等文件,网页文件 - HTML - 网页基础 - KK的小故事
HTML - 网页文件 ¶作者:KK 发表日期:2016.01.26 学习本章节前你需要准备以下知识/技能: 使用 Chrome 浏览器/火狐浏览器来测试练习代码,如果用360极速浏览器或QQ浏览器等 ...
- php说明代码怎么写,代码怎么写 - 起步 - PHP基础 - KK的小故事
起步 - 代码怎么写 ¶ 作者:KK 发表日期:2016.3.9 要写PHP代码就需要建立.php后缀的文件,并且在文件里要以<?php 具体代码 ?>这样的形式来书写PHP代码 我们在网 ...
- C++调用ffmpeg批量合并bilibili缓存视频
文章目录 前言 一.先看效果 二.开始写代码 1.遍历文件 2.获取视频标题和视频名称 3.生成视频 4.主函数 总结 前言 手机bilibili缓存了很多视频,想导入电脑看,但发现缓存的视频被分割成 ...
- GitChat · 人工智能 | 如何零基础用 Keras 快速搭建实用深度学习模型
GitChat 作者:谢梁 原文: 如何零基础用 Keras 快速搭建实用深度学习模型 关注微信公众号:GitChat 技术杂谈 ,一本正经的讲技术 [不要错过文末活动] 前言 在这篇小文章中,我们将 ...
- C语言零基础入门——1.基础知识与环境搭建。
C语言零基础入门--1.基础知识与环境搭建. 好了.终于迎来了第一篇文章,这篇文章要做的事情非常简单,主要有三个事情 第一:C语言的介绍. 第二:计算机的基础知识. 第三:C语言的环境安装 ...
- Android零基础入门第65节:RecyclerView分割线开发技巧
2019独角兽企业重金招聘Python工程师标准>>> 在上一期通过简单学习,已经领略到了RecyclerView的灵活性,当然都是一些最基础的用法,那么本期一起来学习Recycle ...
- ETH:Windows搭建ETH(区块链技术)利用Web端和小程序端两种方式调用ETH上的SC智能合约
ETH:Windows搭建ETH(区块链技术)利用Web端和小程序端两种方式调用ETH上的SC智能合约 目录 1.Geth安装.配置文件.与ETH节点交互 1.1.下载并安装好geth客户端 1.2. ...
- 循序渐进linux——基础知识、服务器搭建、系统管理、性能调优、集群应用_第四讲,Proxmox部署与应用...
大家好!今天小编继续给大家介绍Ceph存储系统第四讲<Proxmox部署与应用>.在前几讲给大家介绍了Ceph存储系统基础知识,大家应该已经对Ceph有个大概了解,当然了解归了解,在实际工 ...
- MyBatis 架构分层与模块划分-基础支持层
最后一个就是基础支持层.基础支持层主要是一些抽取出来的通用的功能(实现复用),用来支持核心处理层的功能.比如数据源.缓存.日志.xml 解析.反射.IO.事务等等这些功能. 这个就是MyBatis 的 ...
最新文章
- 多用户使用一台计算机可设置,《计算机应用基础》试卷(A)
- 为什么要学C语言及C语言存在的意义,新手经常犹豫学不学C语言
- SendInput代替了keybd_event
- java知识体系 servlet_03-Servlet 体系结构知识梳理
- mysql8.0.22安装步骤图解_MySQL server 5.5的安装 步骤图解
- C++11 并发指南三(Lock 详解)
- php easysms,二次开发-如何在PHPEMS-发送短信验证码(以easy-sms为例)
- code review手记3
- uva 1331 - Minimax Triangulation(dp)
- 计算机专业线性代数教学大纲,线性代数(专业必修课)教学大纲(2018版)
- 小米10pro手机电路图 主板元件位号图
- 情感读本杂志情感读本杂志社情感读本编辑部2022年第23期目录
- windows10升级助手_微软官网下载与安装windows10系统的操作步骤
- 爱上调试:div初探,参照物的重要性!
- U盘出现物理故障都有哪些表现
- 大学生计算机基础与实训,大学生计算机基础实训六样文.docx
- LeetCode 517 超级洗衣机 解法
- 【参赛作品97】openGauss单机版安装步骤
- vue实现实例搜索和排序
- 开启手机找回连接服务器失败,原神连接服务器失败什么意思?连接服务器失败解决方法...
热门文章
- Zhong__PyCharm配置豆瓣源提升插件、依赖安装速度
- Python爬虫练习-查询lol隐藏分
- Java中将汉语转成拼音的方法
- python 协程库_python 协程库gevent学习--gevent数据结构及实战(四)
- linux限制指定ip禁止访问指定端口,linux设置iptables禁止某个IP访问
- conda创建虚拟环境
- Neural Factorization Machines(NFM)
- SRAM SROM DRAM DROM DDR NAND FLASH EMMC的区别
- android 各个版本安全特性
- webpack--黑洞级入门