gulp将header/footer引入页面 gulp使用gulp-file-include将header/footer引入页面

前言：在写静态页面的时候，公共的头部和底部or侧边栏同样，每写一个页面，都要复制粘贴，每当修改后，还要对原先的header、footer修改，这及其麻烦；不更新，部分效果又看不到影响整体效果。

解决：用gulp的插件能够将header、footer、sidebar的静态页面引入每个须要的页面，只须要写一段注释，编译时，会在注释内将header、footer、sidebar模板页面插入。

其余更为简单方便的方法：gulp使用gulp-file-include将header/footer引入页面

 

好比：

替换后每次修改，每一个引入的页面都会修改

须要用到的模块有：gulp、fs、gulp-replace这三个，一个task如图：

共有三个模板页面引入，须要增长能够再添加pipe

首先利用fs模块来读取目标目录下的文件，我这里是srcPath.htmlroot，这是源文件的html的root，而后遍历各个文件，把文件中的占位符<!--header--><!--headerend-->和<!--footer--><!--footerend-->分别替换为header.html和footer.html中的内容，最后在输出到原目录下就OK了。

为何要用replace替换占位符的方式，而不用concat直接把内容给追加到页面呢？这是考虑到gulp任务可能执行屡次的状况，重复追加内容没法控制，因此用正则匹配替换内容的方式，不管任务执行多少次都不会重复追加内容。

事实上，为了可以让header、footer模板修改的时候，其余页面也能自动更新内容，咱们能够再加一个watch任务：

将html加入监听中，每次修改后，都会生成新的html，header、footer、sidebar修改后，对应的html也会被修改