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

背景：

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

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

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

准备工作

1. 检查打包文件夹是否在.gitignore设置了忽略，如果没有需求加上
2. 删去本来的打包文件夹，将发布仓移入代码仓并更名为打包文件夹姓名（如dist）
3. 检测发布仓和代码仓git密码是否有保存，如果没有需求加上
4. 根目录创立文件夹middeware，包含js文件：shell指令封装 sh.js ,主动打包提交 ci.js，主动打包 build.js,主动提交 push.js
5. pnpm install shelljs (不约束使用pnpm仍是npm仍是cnpm等等，自己习惯使用pnpm)
6. package.json内配置打包时不铲除打包文件夹及常用的ci指令（见下图）

Itisrealshowtime!

首要封装需求用到的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()

相关指令

    pnpm run ci [env] [branch] [commit log]          打包提交代码仓和发布仓
    pnpm run ci:build [env] [commit log]             打包提交发布仓
    pnpm run ci:push [branch] [commit log]           提交代码仓

总结

以上便是前端本地主动化提交的一切内容了，读者的上线标准流程可能与自己不一致，可根据实际情况更改指令。

注：本文的技能完成必定程度上参阅了gitee.com/liuziwei121…