既然你使用了gulp的话,可以使用gulp来实现头部和尾部的同步功能,在做同步功能之前,需要对主站进行以下微调处理。

将主站的头部和尾部的html,js, css 分离出来,变成单独的文件存放到服务器上

当主站头尾有更新的时候,先更新分离好的头部、尾部文件

使用gulp将分离好的代码合并到页面中进行上线部署,这时分离代码也需要同步部署到云服务器上,提供给子站同步资源使用

以上3个步骤完成后,开始对子站进行同步功能的实现

假设,主站头部、尾部的资源文件如下

https://xxx.com/views/layouts/header.html https://xxx.com/views/layouts/footer.html https://xxx.com/assets/css/header.css https://xxx.com/assets/css/footer.css https://xxx.com/assets/js/header.js https://xxx.com/assets/js/footer.js

gulpfile.js 同步代码示例 (资源路径根据实际情况自行调整)

const gulp = require('gulp') var download = require('download') var fs = require('fs') // 同步地址 var domain = 'https://xxx.com' // 同步html任务 gulp.task('download-html', function() { return Promise.all([ '/views/layouts/header.html', '/views/layouts/footer.html', ].map(url => download(domain + url, '/views/layouts/'))) }) // 同步css任务 gulp.task('download-css', function() { return Promise.all([ '/assets/css/header.css', '/assets/css/footer.css', ].map(url => download(domain + url, '/assets/css/'))) }) // 同步js任务 gulp.task('download-js', function() { return Promise.all([ '/assets/js/header.js', '/assets/js/footer.js', ].map(url => download(domain + url, '/assets/js/'))) }) // 同步html中的图片资源 gulp.task('download-resource', function() { return new Promise((resolve, reject) => { // 解析html图片路径 let urls = [ 'views/layouts/header.html', 'views/layouts/header-m.html', 'views/layouts/footer.html', 'views/layouts/footer-m.html', 'views/layouts/slideNav.html' ] // 读取已下载好的html文件 var html = '' urls.map(url => { html += fs.readFileSync(url) }) // 提取图片路径 var imglist = html.match(/[^\'\"]+\.((png)|(jpg)|(webp)|(gif))/ig) var loopfun = async function(idx) { try { let url = imglist[idx].replace('../', '') let dir = url.substring(0, url.lastIndexOf('/')) await download(domain + url, dir) console.log(domain + url, 'ok') } catch (e) { // console.log(e) } if (idx < imglist.length - 1) loopfun(idx + 1) else resolve() } loopfun(0) }) }) // 创建同步任务 gulp.task('async', series(['download-html', 'download-js', 'download-css', 'download-resource']))

以上同步脚本写好后,进入项目目录,运行 同步命令就可以啦

gulp async