背景：
先介绍我们原本的代码上线流程：首先发布仓和代码仓（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()
复制代码相关命令
pnpm run ci [env] [branch] [commit log] 打包提交代码仓和发布仓
pnpm run ci:build [env] [commit log] 打包提交发布仓
pnpm run ci:push [branch] [commit log] 提交代码仓
复制代码总结
以上就是前端本地自动化提交的所有内容了，读者的上线规范流程可能与本人不一致，可根据实际情况更改命令。
