前言

以前實現差異化或者說項目上線之前會有一個項目的異化合并打包。這種事情以前一般都是運維或者是后端同事去干，用的一般是 ant 或者是自己寫個腳本什么的，在這里我們就不說了【其實是沒有玩過】。但是這樣做的缺點也是很明顯，缺點如下：

上線之前合并的項目前端人員沒法看到或者說要發布到測試環境后才可以看到，對前端哥哥來說實在是不友好，當然了你要是說直接 copy 一份覆蓋后用 live-server 啟動不就可以了嗎？可以是可以但是這樣做太 low 不說，萬一做的時候手一抖又出現好多 bug。所以作為一個有志青年，這種臟活累活還是不要自己去做，我們要工機器也就是工具去幫我們做。

所以就有這篇文章了！

差異化項目特點：

90%以上的功能點都是一樣。

經常在一些城市級項目或者是跨國項目中出現。

前端打包差異化項目需求：

差異化合并新老項目，減少項目重復開發帶來的開發和維護成本。

同時對一些資源簡單處理，比如對 js 進行 babel 轉譯等。

合并打包時，打開瀏覽器展示合并后的項目內容并實現熱更新。

基于上面的需求我們來一步步實現功能。

準備技術棧：

gulp

gulp-babel 轉譯 es6 語法等

del 刪除項目內容

browser-sync 同步瀏覽器

一些概念聲明

這里咱們先定義一下概念，這樣對接下來的思路說明能更加的清晰些。

標準項目【standard】，指的就是總的項目，也可以稱為總干線，所有的開發功能和模塊都在這里。

差異化項目【shenzhen】，指的是需要差異化標準項目的項目。這里需要注意的是，需要差異化處理的文件或者文件夾名稱一定要和標準項目文件和文件夾一一對應。

目標項目，目標項目指標準項目和差異化項目合并后生成的項目

思路

基于上面的【一些概念聲明】，我們寫出了下面的步驟：

找到標準項目【standard】和差異化項目【shenzhen】所有的文件

對比標準項目【standard】和差異化項目【shenzhen】

如果差異化項目【shenzhen】中存在標準項目【standard】的文件或者文件夾，則差異化項目【shenzhen】文件或者文件夾覆蓋標準項目【standard】文件或者文件夾內容。

找到目標項目并先刪除目標項目內容

把合并生成后的標準項目和差異化項目打包到目標項目中。

項目目錄結構

project-merge 平臺名稱|-bin|-dev 開發環境| |-standard 標準項目| |-yunying 具體項目【多加這一步是因為我們平臺是項目定制的，每個平臺都會有很多項目，比如小程序、公眾號、APP、pc官網等等】| |-shenzhen 差異化項目| |-yunying 差異化具體項目|-dist 生產環境| |-shenzhen 打包后的差異化項目|-yunying 差異化具體項目|-gulpfile.js gulp任務管理|-gulpTaskConfig.json 項目配置文件

根據上面的項目目錄結構簡單說明：

開發環境中的項目和生產環境想目錄必須保持項目，包含所有的文件差異化文件名。

上面的目錄只所以多了一層是由于我司業務場景這么設置會更加合理，當然了，這個是可以變的，只是改變的時候對應的開發和生產環境結構跟著改變即可。

下面是具體說說 gulpTaskConfig.json 項目配置文件配置。

gulpTaskConfig.json 配置項說明

keyvalue是否必填說明

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 = browserSync.reload; 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 (item.needBabel) {paths.pipe(babel({presets: ['@babel/env'],}),).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);}); });

使用步驟

安裝 gulp-cli，為了使用 gulp 命令
$ npm install gulp-cli -g

進入當前目錄安裝開發所需依賴
$ npm install

gulp test【對應 gulpTaskConfig.json 中的 taskname】執行

結果

如果有多個項目需要差異化打包，咋整？

步驟：

在對應項目下新增對應的平臺

配置 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',}, ];

執行對應的 taskname 即可合并打包對應的項目

如：

gulp yunyinggulp weixin

具體項目源碼，可以到我的 github 查看傳送門

總結

以上是生活随笔為你收集整理的前端差异化项目合并打包的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。