前端自动化如何搞定-使用shelljs可以帮助轻松实现

拾荒李

已于 2023-04-01 14:39:30 修改

阅读量1.1k

点赞数

分类专栏：技术文章标签：前端自动化 git

于 2023-03-13 09:34:48 首次发布

本文链接：https://blog.csdn.net/woyebuzhidao321/article/details/129479074

版权

技术专栏收录该内容

61 篇文章 8 订阅

订阅专栏

在开发过程中，常会遇到如下命令：

git add .
git commit -m '*****'
git push

shelljs这个库能够让我们在js文件中执行shell命令。shelljs做的事就是自动化，从耗时的重复性常规动作里解放出来，提升开发效率和工作心情。
官网：https://www.npmjs.com/package/shelljs
npm install shelljs -D

官网示例

https://www.npmjs.com/package/shelljs
这里做下解释

// 引入shelljs
var shell = require('shelljs');

// 检查控制台是否运行 git 开头的命令
if (!shell.which('git')) {
 //在控制台输出内容
  shell.echo('Sorry, this script requires git');
  shell.exit(1);
}

// 删除out/Release目录
shell.rm('-rf', 'out/Release');
// 将stuff/ 下面的内容拷贝至 out/Release 目录
shell.cp('-R', 'stuff/', 'out/Release');

// 进入 lib目录
shell.cd('lib');

shell.ls('*.js').forEach(function (file) {
	// 这涉及 sed流编辑器，建议专题学习，-i 表示直接作用源文件
	// 将build_version 字段替换为 v0.1.2
  shell.sed('-i', 'BUILD_VERSION', 'v0.1.2', file);
  // 将包含 REMOVE_THIS_LINE 的字符串行删除
  shell.sed('-i', /^.*REMOVE_THIS_LINE.*$/, '', file);
  // 将包含 REPLACE_LINE_WITH_MACRO 字符串的行替换为 macro.js 中的内容
  shell.sed('-i', /.*REPLACE_LINE_WITH_MACRO.*\n/, shell.cat('macro.js'), file);
});
// 返回上一级
shell.cd('..');

// 同步运行外部工具
if (shell.exec('git commit -am "Auto-commit"').code !== 0) {
  shell.echo('Error: Git commit failed');
  shell.exit(1);
}

官方示例中涉及的命令解释：

shell.which(command)>在环境变量PATH中寻找指定命令的地址,判断该命令是否可执行，返回该命令的绝对地址。
echo > 在控制台输出指定内容
exit(code) > 以退出码为code退出当前进程
rm > 删除一个目录中一个或多个文件或目录，一旦删除，无法恢复。常用参数：
- -f:强制删除文件；
- -i:删除之前先询问用户；
- -r:递归处理目录;
- -v:显示处理过程；
cp([options,] source_array, dest) > 用来将一个或多个源文件或目录复制到指定的文件或目录。常用参数：
- -f:强制删除文件;
- -i:删除之前先询问用户;
- -r:递归处理目录;
cd > 切换工作目录至指定的相对路径或绝对路径。cd…为返回上一级，cd-回到前一目录。
Is> 用来显示目标列表。常用参数
- -a:显示所有文件；
- -C:多列显示查询结果；
- -l:单列长格式显示查询结果(与-C相反);
- -R:递归处理目录;
sed([options,] searchregex, replacement, filearray > 将file_array中符合search_regex的内容替换为replacement ,支持正则的捕获组自引用。一次处理一行内容,处理完成后把缓冲区内容送往屏幕,然后处理下一行,循环直至结束。功能丰富且用法较复杂,建议自行百度进行专题学习。
- -i：直接作用源文件
cat > 将一个或多个文件内容读入，指定一个文件时读入该文件，指定多个文件时将内容连接在一起读入。
exec(command,[, options][, callback]) >执行所传入的命令
- async:是否异步执行,默认false,传入callback时自动开启
- slient:不输出信息到console,默认false

文档中其他API概览

chmod > 设置文件调用权限
- 基本语法: chmod [-cfvR] [–help] [–version] mode file…
- -c:若文件权限确实被更改,才显示更改动作
- -f: 权限无法被更改时不显示错误信息
- -v: 显示权限变更的详细资料
- -R:递归,对其目录下所有文件和子文件执行相同操作
- mode字段格式: [ugoa.][[±=][rwxX]…][,…]
- u表示该文件拥有者,g表示同一群体者,o表示其他,a表示所有
- +表示增加权限，-表示取消权限，=表示唯一设定权限
- r表示可读,w表示可写,x表示可执行,X表示当该文件是个子目录?
find(path[path…))
寻找路径
grep([options,] regex_filter,file) > 从指定文件中抓取符合正则的行
- -v:翻转正则匹配
- -l:仅打印符合条件的文件名
head([{‘-n’:,}] file) >显示指定文件中的前N行
- -n:显示前行
mv > 移动文件
pwd > 返回当前目录
rm > 见上文
set > 设置全局变量的值
sort > 将文件的内容逐行排序
- -r:反转结果
- -n：依据数值对比
tail > 读取指定文件的末尾n行，对比head命令进行理解
test () >评估一个表达式是否为真(以下仅为最常见的参数用例)
- -d,path:如果path是一个路径则返回true
- -e,path:如果path存在则返回true

案例-vue项目Shelljs一键打包自动部署

这里涉及一个新包 ssh2-sftp-client, 是一个用于node.js的SFTP客户端，一个用于SSH2的包装程序（提供高级便利抽象）以及一个基于Promise的API，实现用JS代码连接远程服务器。https://www.npmjs.com/package/ssh2-sftp-client

config.js

module.exports = {
  ip: "", // ssh地址
  username: "", // ssh 用户名
  port:"",      //端口
  password: "", // ssh 密码
  path: '/opt/html/', // 操作开始文件夹 可以直接指向配置好的地址
  rmpath: '/opt/html' // 需要删除的文件夹
}

index.js

const config = require('./config.js')
const shell = require('shelljs')
const path = require('path');
let Client = require('ssh2-sftp-client');
// 打包 npm run build
const compileDist = async () => {
  if(shell.exec(`npm run build`).code==0) {
    console.log("打包成功")
  }
}

async function connectSSh() {
  let sftp = new Client();
  sftp.connect({
    host: config.ip, // 服务器 IP
    port: config.port,
    username: config.username,
    password: config.password
  }).then(() => {
    console.log("先执行删除服务器文件")
    return sftp.rmdir(config.rmpath, true);
  }).then(() => {
    // 上传文件
    console.log("开始上传")
    return sftp.uploadDir(path.resolve(__dirname, '../dist'), config.path);
  }).then((data) => {
    console.log("上传完成");
    sftp.end();
  }).catch((err) => {
    console.log(err, '失败');
    sftp.end();
  });
}
async function runTask() {
  await compileDist()     //打包完成
  await connectSSh()      //提交上传
}
runTask()

在学习下js执行shell命令的其它方式

child_process

https://nodejs.cn/api/child_process.html#child_processexecsynccommand-options
介绍

child_process是node提供的一个子进程AP，具体可见官网、中文网关于此类api的介绍，对衍生shell及参数有非常详细的说明，下面列出两个常用的api

child_process.exec(command[, options][, callback])
command：要运行的shell命令
创建一个新的shell进程，然后执行command
child_process.execFile(file[, args][, options][, callback])
file：要运行的文件名称或路径,参数作为数组传入
直接将可执行的file创建为新进程；需要单独写.sh文件，可编写复杂逻辑，但在windows上使用时会有兼容问题（此外，还有child_process.spawn()等可供选择）

示例:

const util = require('util');
const child_process = require(‘child_process');
// 调用util.promisify方法，返回一个promise,如const { stdout, stderr } = await exec('rm -rf build')
const exec = util.promisify(child_process.exec);
const appPath = join(__dirname, 'app');

const runClean = async function () {
 // cwd指定子进程的当前工作目录 这里的rm -rf build为删除指定目录下的一个文件夹
  await exec(`rm -rf build`, { cwd: appPath });
  await exec(`rm -rf test`, { cwd: appPath });
runClean();

simple-git

鉴于上个例子，执行shell脚本操作git，其实对于复杂的git命令语句，写起来还是很不方便，最后介绍一个专为git设计的插件：simple-git(npm地址)

介绍

在项目中引入插件后，调用simple-git/promise可执行异步git操作，方便结合async/await使用
它封装并支持了很多git的方法，比如clone、commit、status、pull等等，将cmd命令和参数，传入即可
甚至可以用git.raw(),解析前端输入的git命令

示例

以下为客户端项目通过ipc通信，处理git的请求

const simpleGit = require('simple-git/promise');

......

// 执行客户端模拟的 simple-git 函数
ipcMain.handle('simple-git', async function (e, { projectPath, cmd, args }) {
  const git = simpleGit(projectPath);
  try {
    const res = await git[cmd](...args);
    return res;
  } catch (e) {
    console.error('执行 simple-git 命令时发生错误', { projectPath, cmd, args }, e);
    throw e;
  }
});