前端差异化项⽬合并打包
前⾔
以前实现差异化或者说项⽬上线之前会有⼀个项⽬的异化合并打包。这种事情以前⼀般都是运维或者是后端同事去⼲，⽤的⼀般是 ant 或者是⾃⼰写个脚本什么的，在这⾥我们就不说了【其实是没有玩过】。但是这样做的缺点也是很明显，缺点如下：
上线之前合并的项⽬前端⼈员没法看到或者说要发布到测试环境后才可以看到，对前端哥哥来说实在是不友好，当然了你要是说直接 copy ⼀份覆盖后⽤ live-server 启动不就可以了吗？可以是可以但是这样做太 low 不说，万⼀做的时候⼿⼀抖⼜出现好多 bug。所以作为⼀个有志青年，这种脏活累活还是不要⾃⼰去做，我们要⼯机器也就是⼯具去帮我们做。
所以就有这篇⽂章了！
差异化项⽬特点：
1. 90%以上的功能点都是⼀样。
2. 经常在⼀些城市级项⽬或者是跨国项⽬中出现。
前端打包差异化项⽬需求：
1. 差异化合并新⽼项⽬，减少项⽬重复开发带来的开发和维护成本。
2. 同时对⼀些资源简单处理，⽐如对 js 进⾏ babel 转译等。
3. 合并打包时，打开浏览器展⽰合并后的项⽬内容并实现热更新。
基于上⾯的需求我们来⼀步步实现功能。
准备技术栈：
1. gulp
2. gulp-babel 转译 es6 语法等
3. del 删除项⽬内容
4. browser-sync 同步浏览器
⼀些概念声明
这⾥咱们先定义⼀下概念，这样对接下来的思路说明能更加的清晰些。
1. 标准项⽬【standard】，指的就是总的项⽬，也可以称为总⼲线，所有的开发功能和模块都在这⾥。
2. 差异化项⽬【shenzhen】，指的是需要差异化标准项⽬的项⽬。这⾥需要注意的是，需要差异化处理的⽂件或者⽂件夹名称⼀定要和
标准项⽬⽂件和⽂件夹⼀⼀对应。
3. ⽬标项⽬，⽬标项⽬指标准项⽬和差异化项⽬合并后⽣成的项⽬
思路
基于上⾯的【⼀些概念声明】，我们写出了下⾯的步骤：
1. 到标准项⽬【standard】和差异化项⽬【shenzhen】所有的⽂件
2. 对⽐标准项⽬【standard】和差异化项⽬【shenzhen】
3. 如果差异化项⽬【shenzhen】中存在标准项⽬【standard】的⽂件或者⽂件夹，则差异化项⽬【sh
enzhen】⽂件或者⽂件夹覆盖标
准项⽬【standard】⽂件或者⽂件夹内容。
4. 到⽬标项⽬并先删除⽬标项⽬内容
5. 把合并⽣成后的标准项⽬和差异化项⽬打包到⽬标项⽬中。
项⽬⽬录结构
project-merge 平台名称
|-bin
|-dev 开发环境
|  |-standard 标准项⽬
|      |-yunying 具体项⽬【多加这⼀步是因为我们平台是项⽬定制的，每个平台都会有很多项⽬，⽐如⼩程序、、APP、pc官⽹等等】
|  |-shenzhen 差异化项⽬
|      |-yunying 差异化具体项⽬
|-dist ⽣产环境
|  |-shenzhen 打包后的差异化项⽬
|-yunying 差异化具体项⽬
|-gulpfile.js gulp任务管理
|-gulpTaskConfig.json 项⽬配置⽂件
根据上⾯的项⽬⽬录结构简单说明：
1. 开发环境中的项⽬和⽣产环境想⽬录必须保持项⽬，包含所有的⽂件差异化⽂件名。
2. 上⾯的⽬录只所以多了⼀层是由于我司业务场景这么设置会更加合理，当然了，这个是可以变的，只是改变的时候对应的开发和⽣产
环境结构跟着改变即可。
下⾯是具体说说 gulpTaskConfig.json 项⽬配置⽂件配置。
gulpTaskConfig.json 配置项说明
key value是否必填说明
taskname string是任务名，⽤于在命令⾏输⼊，例如： gulp test
standard string是指定标准版位置
different string是指定差异化版本路径
target string是指定打包⽣产⽬录路径
port string否指定端⼝位置，⽤于同时启动多个任务时需要配置
note string否任务说明
needBabel boolean否是否需要 babel 编译，默认不开启，⽼项⽬某些代码不能通过编译
gulpfile.js 配置项说明
var gulp = require('gulp');
var del = require('del');
var path = require('path');
var browserSync = require('browser-sync');
var reload = load;
var babel = require('gulp-babel');
//拿到对应的配置项
var gulpTaskConfig = require('./gulpTaskConfig.json');
gulpTaskConfig.forEach(item => {
const DEL = `${item.taskname}_del`;
const BUILD = `${item.taskname}_build_without_js`;
const BUILDJS = `${item.taskname}_build_with_js`;
const SERVER = `${item.taskname}_server`;
//每次打包时，先删除⽬标项⽬内容
gulp.task(DEL, function() {
del([`${item.target}/**/*`]);
});
/**合并除js以外⽂件 */
gulp.task(BUILD, function() {
gulp.src([`${item.standard}/**/!(*.js)`, `${item.different}/**/!(*.js)`]).pipe(gulp.dest(item.target));  });
/**babel 编译js */
gulp.task(BUILDJS, function() {
const paths = gulp.src([`${item.standard}/**/*.js`, `${item.different}/**/*.js`]);
if (dBabel) {
paths
.pipe(
babel({
presets: ['@babel/env'],
}),
js合并两个数组)
.pipe(gulp.dest(item.target));
} else {
paths.pipe(gulp.dest(item.target));
}
});
/**起server */
gulp.task(SERVER, function() {
browserSync({
server: {
baseDir: `${item.target}`,
reloadDebounce: 1000,
},
port: item.port || 8080,
});
});
/
/执⾏任务
gulp.task(item.taskname, function() {
gulp.run(DEL, BUILD, BUILDJS, SERVER);
gulp.watch(`${item.different}/**`, [BUILD, BUILDJS]).on('change', reload);
});
});
使⽤步骤
1. 安装 gulp-cli，为了使⽤ gulp 命令
$ npm install gulp-cli -g
2. 进⼊当前⽬录安装开发所需依赖
$ npm install
3. gulp test【对应 gulpTaskConfig.json 中的 taskname】执⾏
结果
如果有多个项⽬需要差异化打包，咋整？
步骤：
1. 在对应项⽬下新增对应的平台
2. 配置 gulpTaskConfig.json ⽂件，其实就是在数组中多加⼀个对象即可，如下：
[
{
taskname: 'yunying', //运营管理平台
standard: './dev/standard/yunying',
different: './dev/shenzhen/yunying',
target: './dist/shenzhen/yunying',
note: '运营管理平台',
port: '4000',
},
{
taskname: 'weixin', //
standard: './dev/standard/weixin',
different: './dev/shenzhen/weixin',
target: './dist/shenzhen/weixin',
note: '',
port: '5000',
},
];
1. 执⾏对应的 taskname 即可合并打包对应的项⽬
如：
gulp yunying
gulp weixin
具体项⽬源码，可以到我的 github 查看

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。