uni-app HBuilderX技巧：利用外部命令，可以做哪些事？

uni-app HBuilderX技巧：利用外部命令，可以做哪些事？本帖文档已集成到: hx产品文档

外部命令能干什么呢？

外部命令可以让您在HBuilderX中通过菜单、快捷键等方式调用外部程序或命令行

使用场景

压缩文件与解压
压缩图片
文档转换（比如markdown转pdf）
调用python、shell脚本
打开本地的某个程序
传输文件到服务器
操作服务器的某些服务（如启动、停止、重启nginx)
下载文件
安装apk到手机
上传应用到应用分发网站（比如蒲公英）
批量压缩
其它的自动化操作
上传文件到七牛云、阿里云等

外部命令在哪里？

菜单【工具】–>【外部命令】–>【自定义外部命令】

外部命令菜单

外部命令怎么用？

最后再介绍吧，先看几个例子。

例子1：压缩、解压

windows例子:

[
    {
        "name": "文件: 压缩7z格式",
        "command": "\"C:/Program\ Files/7-Zip/7z.exe\" a ${file}.7z ${file}",
        "type": "process",
        "key": ""
    },
    {
        "name": "文件: 压缩zip格式",
        "command": [
            "C:/Program Files/7-Zip/7z.exe",
            "a",
            "${file}.zip",
            "${file}"
        ],
        "type": "process",
        "key": ""
    },
    {
        "name": "文件: 解压",
        "command": "\"C:/Program Files/7-Zip/7z.exe\" x ${file}",
        "type": "shell",
        "key": ""
    }
]

Mac例子：

[
    {
        "name": "压缩目录为bz2",
        "command": "cd ${fileDir} && tar -jcvf ${fileBasename}.tar.bz2 ${fileBasename}",
        "type": "terminal",
        "key": "alt+shift+e"
    },
    {
        "name": "解压zip包",
        "command": "unzip ${file}",
        "type": "terminal",
        "key": "alt+shift+e"
    }
]

例子2：调用外部python、shell等脚本

[
    {
        "name":"调用python脚本",
        "command":"python script.py",
        "type" : "terminal",
        "key":"alt+shift+p"
    }
]

例子3：调用TinyPNG无损压缩图片

大部分情况下, 图片都是需要压缩的,为了更快的打开网页,节省流量

推荐：TinyPNGg官网无损压缩，良心网站，每月500张免费。

如下所示：YOUR_API_KEY是你申请的key, --output 可以指定目录文件名，注意如果和当前图片路径一致，会覆盖原先图片

[
    {
        "name":"调用TinyPNG无损压缩图片",
        "command":"curl --user api:YOUR_API_KEY --data-binary @${file} -i https://api.tinify.com/shrink --output ${file}",
        "type" : "terminal",
        "key":"alt+shift+m"
    }
]

注意：curl是mac自带的命令，windows上如需使用curl，请下载curl 安装

例子4：下载文件

mac上下载文件的命令有：wget、curl

windows上下载文件的命令是：bitsadmin.exe

[
    {
        "name":"下载文件",
        "command":"wget -c ${userInput:输入要下载的地址url}",
        "type" : "terminal",
        "key":"alt+shift+m"
    }
]

注意： ${userInput:弹框说明} 会在当前屏幕弹框,可以输入内容

例子5： Mac: 复制项目到远程linux服务器

scp是linux和mac上才能用的命令，windows上不可以使用哦

[
    {
        "name":"scp传输项目到服务器",
        "command":"scp -r ${projectDir} 用户名@ip:服务器目录路径",
        "type" : "terminal",
        "key":"alt+shift+m"
    }
]

例子6：远程linux服务器重启/启动nginx服务

[
    {
        "name":"远程服务器重启nginx",
        "command":"ssh 用户@ip '/opt/nginx/sbin/nginx -s reload'",
        "type" : "terminal",
        "key":""
    },
    {
        "name":"远程服务器重启nginx",
        "command":"ssh 用户@ip '/opt/nginx/sbin/nginx'",
        "type" : "terminal",
        "key":""
    }
]

例子7：使用pandoc转markdown为pdf、doc、html

pandoc是什么？

pandoc是一个软件，是一个能把千奇百怪的文档格式互相转换的神器，是一把文档转换的瑞士军刀。

安装后，可以通过命令调用。

pandoc官网

pandoc结合外部命令的例子

[
    {
        "name": "Pandoc转md为pdf",
        "command": "pandoc ${file} -o ${fileBasename}.pdf",
        "type": "terminal",
        "key": ""
    },
    {
        "name": "Pandoc转md为doc",
        "command": "pandoc ${file} -o ${fileBasename}.docx",
        "type": "terminal",
        "key": ""
    },
    {
        "name": "Pandoc转md为html",
        "command": "pandoc ${file} -o ${fileBasename}.html",
        "type": "terminal",
        "key": ""
    }
]

例子8：安装apk到Android手机

[
    {
        "name": "安装apk到android手机",
        "command": "adb install ${file}",
        "type": "terminal",
        "key": ""
    }
]

例子9：【蒲公英】内测应用上传

[
    {
        "name": "【蒲公英】内测应用上传",
        "command": "curl -F 'file=@${file}' -F 'uKey=xxxxxxx' -F '_api_key=xxxxxx' https://upload.pgyer.com/apiv1/app/upload",
        "type": "terminal",
        "key": "alt+shift+m"
    }
]

说明：uKey、_api_key需要自己申请。网址：https://www.pgyer.com/doc/api

例子10：使用ftp

参考网友贡献http://ask.dcloud.net.cn/article/35459

例子11：使用颜色选择器

该插件目前无需外部命令配置，具体见其文档：http://ext.dcloud.net.cn/plugin?id=146

例子12：批量压缩js文件

find是mac上的命令。windows请自行编写批处理

[
    {
        "name": "js批量压缩",
        "command": "for i in `find ${projectDir} -path ${projectDir}'/unpackage' -prune -o -name '*.js' -and ! -iname '*.min.js'`; do `/Applications/HBuilderX-Alpha.app/Contents/HBuilderX/plugins/compress-babel-minify/node_modules/.bin/minify ${i} --out-file ${i%.js*}.min.js 2>/dev/null`; [ $? -ne 0 ] && echo && echo '压缩错误的文件:'${i}; done",
        "type": "shell",
        "key": "alt+shift+e"
    }
]

外部命令通过key配置快捷键

如上的例子，key，可以配置快捷键哦

{
    "name":"scp传输项目到服务器",
    "command":"scp -r ${projectDir} 用户名@ip:服务器目录路径",
    "type" : "terminal",
    "key":"alt+shift+m"
}

外部命令简介

点击菜单【工具】–>【外部命令】–>【自定义外部命令】，就可以自定义外部命令

官方已经提供了非常详细的说明，赶快去探索吧

外部命令菜单

使用外部命令注意事项

因为变量和快捷键，所以外部命令强大。

//------------外部命令 变量说明------------//
"command"、"workingDir"中可使用预定义的变量来获取当前文件的路径信息
${file} 当前文件的完整路径，比如 D:\files\test.txt
${fileName} 当前文件的文件名，比如 test.txt
${fileExtension}    当前文件的扩展名，比如 txt
${fileBasename} 当前文件仅包含文件名的部分，比如 test
${fileDir} 当前文件所在目录的完整路径，比如 D:\files
${projectDir} 当前文件所在项目的完整路径，只有当前文件是项目管理器中某个项目下的文件时才起作用

sinazl 1楼•2 天前

在uni-app开发中，HBuilderX作为一款强大的开发工具，支持通过外部命令扩展其功能，提升开发效率。以下是一些实际场景及如何利用外部命令实现这些功能的代码案例。

1. 自动格式化代码

使用Prettier格式化代码，可以在HBuilderX中配置外部命令来自动执行Prettier。

配置步骤：

安装Prettier全局包：npm install -g prettier
在HBuilderX中设置外部命令，假设命令名为formatCode。

// HBuilderX 外部命令配置示例（假设在 settings.json 中）
{
    "commands": [
        {
            "command": "formatCode",
            "detail": "Format code with Prettier",
            "exec": "prettier --write ${file}"
        }
    ]
}

2. 自动化构建与部署

通过配置外部命令，可以一键执行构建和部署脚本，比如使用npm run build进行构建，然后使用scp命令将构建文件上传到服务器。

配置示例：

// HBuilderX 外部命令配置示例
{
    "commands": [
        {
            "command": "buildAndDeploy",
            "detail": "Build and deploy project",
            "exec": "npm run build && scp -r /path/to/dist/ user@remote:/path/to/deploy/"
        }
    ]
}

3. 快速启动本地服务器

在开发过程中，经常需要启动本地服务器测试API。可以通过外部命令快速启动，比如使用json-server启动一个模拟的REST API服务器。

配置示例：

// HBuilderX 外部命令配置示例
{
    "commands": [
        {
            "command": "startLocalServer",
            "detail": "Start local JSON server",
            "exec": "json-server --watch db.json --port 3000"
        }
    ]
}

4. Git 操作

在HBuilderX中集成Git操作，如拉取最新代码、提交更改等，可以通过配置Git命令实现。

配置示例：

// HBuilderX 外部命令配置示例
{
    "commands": [
        {
            "command": "gitPull",
            "detail": "Pull latest code from remote repository",
            "exec": "git pull origin main"
        },
        {
            "command": "gitCommit",
            "detail": "Commit changes",
            "exec": "git add . && git commit -m \"${input:commitMessage}\""
        }
    ],
    "inputs": [
        {
            "id": "commitMessage",
            "type": "text",
            "label": "Commit Message",
            "default": "Update code"
        }
    ]
}

这些示例展示了如何利用HBuilderX的外部命令功能，结合各种命令行工具，提升开发效率。注意，实际使用时需根据项目需求调整命令和路径。

uni-app HBuilderX技巧：利用外部命令，可以做哪些事？

例子1：压缩、解压

例子2：调用外部python、shell等脚本

例子3： 调用TinyPNG无损压缩图片

例子4：下载文件

例子5： Mac: 复制项目到远程linux服务器

例子6： 远程linux服务器 重启/启动nginx服务

例子7： 使用pandoc转markdown为pdf、doc、html

pandoc结合外部命令的例子

例子8： 安装apk到Android手机

例子9： 【蒲公英】内测应用上传

例子10：使用ftp

例子11：使用颜色选择器

例子12： 批量压缩js文件

1. 自动格式化代码

2. 自动化构建与部署

3. 快速启动本地服务器

4. Git 操作

例子3：调用TinyPNG无损压缩图片

例子6：远程linux服务器重启/启动nginx服务

例子7：使用pandoc转markdown为pdf、doc、html

例子8：安装apk到Android手机

例子9：【蒲公英】内测应用上传

例子12：批量压缩js文件