一条命令能实现前端本地代码和打包仓库的自动化提交？-烟雨网

theme: fancy

背景：

先介绍我们原本的代码上线流程：首先发布仓和代码仓（dev和master分支对应测试和生产环境）独立，每次修复或新增功能，首先需要提交改动到代码仓（fork），然后打包代码，在发布仓pull后清仓，将打包代码复制进来commit，push，然后去对应环境拉取代码；

作为“精力不集中病癌晚期”患者，经常一个代码的改动打包上线需要5min+,且大多时间损耗在了无意义内耗上，故拟方案文档：

本文仅介绍前端部分，后端部分读者可求助自己公司的后端童鞋

准备工作

检查打包文件夹是否在.gitignore设置了忽略，如果没有需要加上
删除原来的打包文件夹，将发布仓移入代码仓并更名为打包文件夹名字（如dist）
检测发布仓和代码仓git密码是否有保存，如果没有需要加上
根目录创建文件夹middeware，包含js文件：shell命令封装 sh.js ,自动打包提交 ci.js，自动打包 build.js,自动提交 push.js
pnpm install shelljs (不限制使用pnpm还是npm还是cnpm等等，本人习惯使用pnpm)
package.json内配置打包时不清除打包文件夹及常用的ci命令（见下图）

It is real show time!

首先封装需要用到的shell命令

/*
 * sh.js
 * @Descripttion: shell命令
 */
const sh = require('shelljs')

/**
 * @description                             执行shell命令
 * @param {String}      params              命令
 * @returns
 */
 const exec = params => {
    return new Promise((resolve, reject) => {
        const code = sh.exec(params).code
        if (code !== 0) {
            reject()
        } else {
            resolve()
        }
    })
}

/**
 *
 * @description                             进入文件夹
 * @param {String}      params              地址
 * @returns
 */
const cd = params => {
    return new Promise((resolve, reject) => {
        const code = sh.cd(params).code
        if (code !== 0) {
            reject()
        } else {
            resolve()
        }
    })
}

/**
 * @description                              删除操作
 * @param {String}      params               文件或文件夹名字
 * @returns
 */
const rm = params => {
    return new Promise((resolve, reject) => {
        const code = sh.rm('-rf', params).code
        if (code !== 0) {
            reject()
        } else {
            resolve()
        }
    })
}

module.exports = {
    exec,
    cd,
    rm
}

代码仓自动提交功能

/*
 * push.js
 * @Descripttion: 自动提交
 */
const { exec } = require('./sh');

// 打包
const push = async () => {

// 分支
let branch = process.argv.length>2? process.argv[2]:'master' ;

const log =  process.argv.length>3? process.argv[3]:'auto push at '+new Date();

    try {
// 推送分支代码
await exec(`git status`);
await exec(`git add .`);
await exec(`git commit -m "${log}  #FromAutoSubmit"`);
await exec(`git pull origin master`);
await exec(`git push fork ${branch}`);
console.log('git done');
} catch (error) {
console.log(error, 'git error');
}
}

push()

自动打包功能

/*
 * build.js
 * @Descripttion: 自动打包提交
 */
const { resolve } = require('path')
const { exec, cd, rm } = require('./sh')

// 打包
const build = async () => {
//  打包目录
    const path = 'dist'
    const outPath = resolve('./')

// ENV 环境 env 环境全称
let ENV = process.argv.length>2? process.argv[2]:'dev',env='development';
if(ENV == 'prod') env = 'production';

const log =  process.argv.length>3? process.argv[3]:'auto push at '+new Date();
    const branch = env=='development'?'dev':'master'
    await cd(path)
    try {
console.log("开始拉取");
// 切换分支并拉取代码
        await exec(`git checkout .`)
        console.log(`git checkout .`)
        await exec(`git checkout ${branch}`)
        console.log(`git checkout ${branch}`)
        await exec(`git pull origin ${branch}`)
        console.log(`git pull origin ${branch}`)
    } catch (error) {
        console.log(error, 'git error')
    }

    try {
        // 手动删除dist下面的文件夹或文件
        await rm('css')
        await rm('img')
        await rm('js')
        console.log(`rm css img js`)
    } catch (error) {
        console.log(error, 'rm error')
    }

    await cd(outPath);
// 执行打包
await exec(`pnpm run build:${ENV}`);

await cd(path)
    try {
// 推送分支代码
        await exec(`git add .`)
        await exec(`git commit -m "${log}  #FromAutoSubmit"`)
        await exec(`git push origin ${branch}`)
        console.log('git done')
    } catch (error) {
        console.error(error, 'error')
    }
    await cd(outPath)
}



build()

自动提交和打包

/*
 * ci.js
 * @Descripttion: 自动打包
 */
const { exec } = require('./sh');

// 自动打包
const ci = async () => {


// ENV 环境 env 环境全称
let ENV = process.argv.length>2? process.argv[2]:'dev',env='development';
if(ENV == 'prod') env = 'production';
const branch =  process.argv.length>3? process.argv[3]:'dev';
const log = process.argv.length > 4 ? process.argv[4] : 'auto push at ' + new Date();

    try {
await exec(`pnpm run ci:build "${ENV}" "${log}  #FromAutoSubmit"`);
await exec(`pnpm run ci:push "${branch}" "${log}  #FromAutoSubmit"`);
} catch (error) {
console.log(error, '执行出错，请检查');
}
}

ci()