静态html如何写入文件,nodejs://实现静态html文件的公共文件包含功能

缘起

使用过php或其他后台语言的朋友们应该知道，对于公共文件，比如html的头部，底部等，可以单独写成一个.php文件。

比如header.php和footer.php，然后用include('header.php')或者require('header.php')包含进来。

当修改了header.php文件之后，所有引入了这个文件的代码，都会自动加载最新的文件。

这样，一个普通网站如果有十个页面，那么我们只需要改动一次就可以令这十个文件的头部效果都改变。

但是，静态的html文件，是没有类似这样公共html包含功能的。

不过，目前的很多打包工具，比如，gulp，webpack等，都具有这样的插件。

但是，如果在某个时候，我们仅仅只是需要这样的一个简单的功能，而不想npm install webpack 安装一整个webpack工具，也不想安装各种晦涩难懂的插件，更不想去进行令人头疼的webpack配置的时候，我们该如何去实现这样的一个需求呢？

准备

这里，仅仅只用nodejs的原生fs文件模块，去实现这样的一个公共文件包含工具。

需要准备的东西有：

1.安装好的nodejs程序

2.编辑器

规定

思路非常简单：

这里，定义文件目录结构如下。

[图片上传失败...(image-f0f796-1553416201164)]

src是源码目录，包含了pages目录，其下是所有的页面文件，里面可能会引用公共文件。common是公共文件目录，包含了header.html和footer.html等文件。

dist是资源目录，用来存放页面include标签被公共文件替换后的实际使用的页面文件资源。

index.html文件内容

nodejs 制作html静态公共文件包含工具

html,body,div{padding:0;border:0;margin:0;box-sizing:border-box;}

html,body{height:100%;}

body{display:flex;flex-direction:column;}

.center-middle{display:flex;justify-content:center;align-items:center;}

.header{flex:0 0 50px;border-bottom:1px solid #ddd;background-color:#95cfd4;}

.bodyer{flex:1 1 100%;background-color:#ececec;}

.footer{flex:0 0 50px;border-top:1px solid #ddd;background-color:#7def40;}

bodyer

header.html文件内容

header

footer.html文件内容

footer

思路

1.用nodejs的fs模块的readdirSync同步文件读取函数读取pages目录下的所有文件。

2.遍历每个文件，正则匹配语句，读取包含于其中的src属性指定的文件路径，并用此文件内容替换掉当前所匹配的include标签。

3.将替换掉include标签后的新的文件内容，写入到dist资源目录，文件名跟当前pages下的文件名同名。

include.js文件代码

const $Fs = require('fs'); // 引入文件模块

let files = $Fs.readdirSync('./src/pages'); // 读取pages页面文件目录下的html文件

files.forEach((file,index) => { // 遍历获得的所有页面文件

let old_data = $Fs.readFileSync('./src/pages/' + file,'utf8'); // 读取当前文件的内容

let new_data = old_data.replace(/\.*\/gi,(match,p1,offset,string) => {//查找html文件中include标签

let inc_data = $Fs.readFileSync('./src/common/' + p1,'utf8'); // p1是第一个括号匹配到的值，也就是include包含的文件路径，读取此公共文件

return inc_data; // 此回调函数返回的值，将替换正则匹配到的字符串

});

$Fs.writeFileSync('./dist/' + file,new_data); //将include标签被替换后新的html内容，写入到dist资源目录的同名file文件中(不存在会自动新建)。

});

console.log('执行成功');

node执行include.js文件

image

此时dist目录下已经生成index.html文件

image

内容如下图所示

image

浏览器打开查看

image

如上所示，仅仅通过nodejs的fs模块，一个静态html公共文件包含打包功能用十行代码便能实现。

不过，很多人肯定也能一眼看出来，此工具的通用性，可扩展性，健壮性都比较差，路径硬编码，合法性判断等都没有做处理。对此，我的回答如下：

编程是一个创造性的职业，程序员不应该完全被工具左右，造轮子永远是一个值得尝试的行为。

10行代码，不到1kb的大小，能够基本达到webpack + 插件所能达到的功能，何乐而不为？

一叶障目，不见泰山，编程思想就是那几行代码所蕴含的思维，路径硬编码，路径合法性等问题，只是边角料而已。

结语

感谢您的观看，如有不足之处，欢迎批评指正。

本次给大家推荐一个免费的学习群，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。

对web开发技术感兴趣的同学，欢迎加入Q群：