既然你使用了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
