前端差別化項目合併打包

前言

之前實現差別化或者說項目上線以前會有一個項目的異化合並打包。這種事情之前通常都是運維或者是後端同事去幹，用的通常是 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】的文件或者文件夾，則差別化項目【shenzhen】文件或者文件夾覆蓋標準項目【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 = 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);
  });
});

使用步驟

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 查看傳送門