基础支持 - 合并html头尾 ¶

本文导航

先编写头部和尾部代码
接下来到调用代码示例
不同文件使用不同的layout
多套文件多套layout
只要个别文件不需要layout
自定义源代码目录
自定义文件编码

作者：KK
发表日期：2016.6.23

合并头尾的模块其实也有只是没有我心仪的，所以自己做了一个gulp插件叫gulp-layout，我暂时还没发布到npm上所以麻烦你手动下载安装，下载地址是 http://pan.baidu.com/s/1qYN8fnu

下载后解压到项目的node_modules下就算是将模块安装完成了

先编写头部和尾部代码 ¶

在前端src代码目录下创建一个_common目录，里面再建一个layout.html的文件（默认要是UTF-8无BOM格式），里面写上这样的代码：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网站</title>
</head>
<body>
<header>
	<a href="#">导航1</a>
	<a href="#">导航2</a>
	<a href="#">导航3</a>
</header>

<!--注意这行-->
{{content}}

<footer>
关于谁？ 粤ICP备1234号？ 电话110你打不打过来？
</footer>
</body>
</html>

接下来到调用代码示例 ¶

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
});