现在有一个子网站,同步主网站公共头部和底部的需求,求实现思路
-
项目背景如下:
有一个主站,一对子站,每个站点彼此是分开的,不属于同一个项目,现在有一个需求,当主站头部和底部有修改的时候,子站也需要同步修改,因为子站有20几个,如果纯手工去修改的话,效率太慢,并且容易出错,大家有什么思路,借鉴借鉴。
对了技术开发方面,子站使用的是gulp + jquery的开发形式,没有使用vue 和 react这一类可以封装成组件的框架。
-
既然你使用了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
-
-
此回复已被删除!
西南地区IT社群(QQ)
- 云南
- 【昆明网页设计交流吧】243627302
- 【昆明nodejs交流吧】 243626749
- 【VUE】838405306
- 【云南程序员总群】343606807
- 【昆明UI设计】104031254
- 【云南软件外包】15547313
- 贵州
- 【PHP/java源码/站长交流群】55692114
- 四川
- 【成都Java/JavaWeb交流】86669225
- 【vaScript+PHP+MySql】116270060
- 【UI设计/设计交流学习群】135794928
- 重庆
- 【诺基亚 JAVA游戏博物馆】 559479780
- 【PHP,Java,Python,C++接单】 442103442
- 西藏