shelljs实现前端自动化
创始人
2024-06-02 15:10:24
0

在开发过程中,常会遇到如下命令:

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.2shell.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, // 服务器 IPport: 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

  1. child_process.exec(command[, options][, callback])
    command:要运行的shell命令
    创建一个新的shell进程,然后执行command

  2. 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;}
});

相关内容

热门资讯

鸿蒙套娃安卓系统视频,融合与创... 你知道吗?最近科技圈可是炸开了锅,因为华为的新操作系统鸿蒙OS又有了新动作。这不,他们竟然把鸿蒙套娃...
xp系统连接安卓手机问题,实用... 你有没有遇到过这样的情况:你的电脑上还运行着那个经典的XP系统,而你的安卓手机却时不时地想要和你亲密...
压缩安卓系统储存空间,高效管理... 手机里的照片越来越多,游戏也越玩越上瘾,可这安卓系统的储存空间却越来越紧张,是不是感觉像是在挤牙膏?...
安卓手游转苹果系统教程,轻松实... 你是不是也和我一样,手头有一堆安卓手游,突然之间想换换口味,体验一下苹果系统的魅力呢?别急,今天就来...
安卓原生系统锁屏暗,安卓系统锁... 亲爱的手机控们,你是否曾为安卓手机锁屏时的暗模式而感到好奇?那种在夜晚或光线不足的环境中,屏幕自动调...
安卓系统表情包下载地址,安卓系... 你是不是也和我一样,对安卓系统的表情包爱不释手?那些搞笑的、可爱的、甚至是有点小调皮的表情,总能让我...
原生安卓系统声音bug,揭秘那... 你有没有遇到过这种情况?手机里突然传来一阵奇怪的声音,让你瞬间从美梦中惊醒,或者正在专心工作时被打扰...
水果收银机安卓系统,便捷高效的... 你有没有想过,在繁忙的超市里,那些摆满新鲜水果的摊位,背后竟然隐藏着一个小小的科技秘密?没错,就是那...
安卓系统变苹果界面了吗,苹果界... 最近手机界可是炸开了锅,不少安卓用户都在议论纷纷:“安卓系统变苹果界面了吗?”这事儿可真不简单,得好...
miui操作系统与安卓系统吗,... 亲爱的读者,你是否曾在手机上看到过MIUI操作系统和安卓系统这两个名字,好奇它们之间有什么区别?今天...
安卓系统怎么卡道具界面,探究原... 手机用久了,是不是感觉安卓系统越来越卡?尤其是那个道具界面,点开就慢吞吞的,真是让人头疼。别急,今天...
安卓系统红包加速器,畅享无阻新... 你有没有发现,现在用手机抢红包简直是一场速度与激情的较量?别急,别急,让我来给你揭秘一款神器——安卓...
安卓经典版系统更新时间,从首次... 你有没有发现,最近你的安卓手机又悄悄地变了个样?没错,就是那个陪伴我们多年的经典版系统,它又来更新啦...
安卓系统开发要多久,约需1-2... 你有没有想过,自己动手开发一个安卓应用,究竟需要多长时间呢?这可是个让人好奇的问题,毕竟安卓系统开发...
原生安卓系统手机壁纸图片,探索... 亲爱的手机控们,你是否曾为寻找一款独特的壁纸而烦恼?今天,就让我带你走进原生安卓系统手机壁纸的奇幻世...
bmw安卓互联系统,智能驾驶新... 你有没有发现,现在开车已经不仅仅是驾驶那么简单了?一辆好车,还得有个好“大脑”,这样才能让你的驾驶体...
安卓手机升级系统卡吗,安卓手机... 你有没有遇到过这种情况:安卓手机升级系统后,突然感觉手机像蜗牛一样慢吞吞的,心里那个急啊!今天,就让...
无线麦克风安卓系统,轻松实现无... 你有没有想过,在一场热闹的K歌派对或者重要的演讲场合,无线麦克风简直就是救星啊!想象你手握麦克风,自...
怎么重新定制安卓系统,打造专属... 你有没有想过,你的安卓手机其实可以变得独一无二,就像是你自己的小宇宙一样?没错,就是重新定制安卓系统...
安卓系统卡西欧照片软件,安卓系... 你有没有发现,手机用久了,尤其是安卓系统,有时候就像老牛拉破车,慢吞吞的,让人抓狂?这不,最近我就遇...