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

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

背景:

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

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

image.png

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

准备工作

  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命令(见下图)

image.png

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()
复制代码

相关命令

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

总结

以上就是前端本地自动化提交的所有内容了,读者的上线规范流程可能与本人不一致,可根据实际情况更改命令。

注:本文的技术实现一定程度上参考了gitee.com/liuziwei121…

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改