vue 打包自动压缩成zip压缩包，压缩名称并附带当前Git 分支名, 如 dev_dist.zip

紧要

1. 实现效果及功能解析

先上图 -- 效果如下。

如何实现？大致的3部曲。

监听打包完成
获取当前分支明朝
打包完成后执行文件压缩并放根目录

2. vue-cli 生成打包文件更改预知

bulid

    -------- build.js // 功能实现主要更改文件
    -------- ... // 用不着的不做过多说明了

config

    -------- dev.env.js  // 本地开发配置文件
    -------- index.js // 主配置文件
    -------- prod.env.js // 打包开发配置文件

3. 代码分解

获取git 分支名

// 方法1 - 读取git 文件获取
var fs = require("fs")
var gitHEAD = fs.readFileSync('.git/HEAD', 'utf-8').trim(); // ref: refs/heads/dev
var develop = gitHEAD.split('/')[2]; // 环境：dev
// 方法2 - 执行命令获取
const {execSync} = require("child_process")
var branch = execSync("git symbolic-ref --short -q HEAD", {encoding: "utf-8"});
branch = branch.replace("/\n|\r/", ''); // dev

//注：切记使用不同的获取方式，如果没有对应依赖则需要安装

压缩打包目录

var adm_zip = require("adm-zip"); // 压缩插件，其它压缩格式，可自行百度插件
var zipFilePath = path.resolve(__dirname, '..') + "/" + develop + "_dist.zip"; // 获取当前项目路径，并设置压缩文件名称。
var zip = new adm_zip();

// config.build.assetsRoot 对应文件 /config/prod.env.js
zip.addLocalFolder(config.build.assetsRoot);
zip.writeZip(zipFilePath);

扩展

// vue2-cli 打包是没有打包进度的，网上有很多插件，这里举例用webpack 自带的进度插件

// 添加打包实时进度
webpackConfig.plugins.push(new webpack.ProgressPlugin((per, msg) => {
    spinner.color = "blue"
    spinner.text = "[" + per.toFixed(0) + "]  " + msg
}));

// spinner 是 ora 的初始化变量官方说明大致就是展示一个运行加载效果的

3. 代码实现

--- build/build.js ---

... 

// 添加打包实时进度
webpackConfig.plugins.push(new webpack.ProgressPlugin((per, msg) => {
    spinner.color = "blue"
    spinner.text = "[" + per.toFixed(0) + "]  " + msg
}));

// 获取git版本
var fs = require("fs")
var gitHEAD = fs.readFileSync('.git/HEAD', 'utf-8').trim() // ref: refs/heads/develop
var develop = gitHEAD.split('/')[2] // 环境：develop

var zipFilePath = path.resolve(__dirname, '..') + "/" + develop + "_dist.zip";

// 第二个参数是打包完成回调函数。 
webpack(webpackConfig, function (err, stats) {
    if (err) throw err
    spinner.stop()
    process.stdout.write(stats.toString({
        colors: true,
        modules: false,
        children: false,
        chunks: false,
        chunkModules: false
    }) + '\n\n')
    console.info("打包完成，开始压缩...")
    //creating archives
    var zip = new adm_zip();
    zip.addLocalFolder(config.build.assetsRoot);
    zip.writeZip(zipFilePath);
    console.info("压缩完成，压缩路径：" + zipFilePath)
})