What can external commands do?

External commands allow you to call external programs or command lines through menus, shortcut keys, etc. in HBuilderX.

Use of Scenario

  • Compress and decompress file
  • Compress images
  • Document converter（For example, markdown to pdf format）
  • Call python and shell scripts
  • Open a local application
  • Transfer files to the server
  • Execute certain services of the server (such as start, stop, restart nginx)
  • Download files
  • Install apk
  • Upload apps to the distribution website (such as https://www.pgyer.com/)
  • Batch compression
  • Other automated operations
  • Upload files to Qiniu Cloud, Alibaba Cloud, etc.

Where is external commands

From the figure below, you can find several examples through the menu [Tools] —> [External Commands]

What can external commands do? - 图1

Click the menu [Tools] —> [External Commands] —> [Custom External Commands], you can customize the external commands, json format.

Example

Example 1: Compress and decompress

windows:

Most applications are installed in the “Program Files” directory, pay attention to spaces and slashes. Look at the following example,

  1. [{
  2.     "name": "Compressed to 7z file",
  3.     "command": "\"C:/Program\ Files/7-Zip/7z.exe\" a ${file}.7z ${file}",
  4.     "type": "process",
  5.     "key": ""
  6.   },
  7.   {
  8.     "name": "Compressed to zip file",
  9.     "command": [
  10.       "C:/Program Files/7-Zip/7z.exe",
  11.       "a",
  12.       "${file}.zip",
  13.       "${file}"
  14.     ],
  15.     "type": "process",
  16.     "key": ""
  17.   },
  18.   {
  19.     "name": "Decompress",
  20.     "command": "\"C:/Program Files/7-Zip/7z.exe\" x ${file}",
  21.     "type": "shell",
  22.     "key": ""
  23.   }
  24. ]

Mac: 

  1. [
  2.   {
  3.     "name": "Compressed to bz2 directory",
  4.     "command": "cd ${fileDir} && tar -jcvf ${fileBasename}.tar.bz2 ${fileBasename}",
  5.     "type": "terminal",
  6.     "key": "alt+shift+e"
  7.   },
  8.   {
  9.     "name": "Decompress zip file",
  10.     "command": "unzip ${file}",
  11.     "type": "terminal",
  12.     "key": "alt+shift+e"
  13.   }
  14. ]

Example 2: Call external python or shell script

  1. [{
  2.   "name":"run python script",
  3.   "command":"python script.py",
  4.   "type" : "terminal",
  5.   "key":"alt+shift+p"
  6.   }]

Example 3: Call TinyPNG to losslessly compress images

For most websites, images need to be compressed to open the website faster and save data usage. Recommendation: TinyPNGg官网 lossless compression, a good website, the first 500 pictures are free.

  1. [{
  2.       "name":"Call TinyPNG",
  3.       "command":"curl --user api:YOUR_API_KEY --data-binary @${file} -i https://api.tinify.com/shrink --output ${file}",
  4.       "type" : "terminal",
  5.       "key":"alt+shift+m"
  6.   }]

Note: curl is a built-in command of Mac, but Windos must download curl (https://curl.haxx.se/windows/) if needed.

Example 4: Download File

The commands for downloading files on mac are: wget, curl

The command to download files on windows is: bitsadmin.exe

  1. [{
  2.       "name":"Download File",
  3.       "command":"wget -c ${userInput: url}",
  4.       "type" : "terminal",
  5.       "key":"alt+shift+m"
  6.   }]

Note: $(userInput:Box description) will pop up on the current screen, you can input content

Example 5: Mac: scp file to linux

scp is a command that can only be used on linux and mac, not on windows.

  1. [{
  2.       "name":"scp file to linux",
  3.       "command":"scp -r ${projectDir} user@ip:server_path",
  4.       "type" : "terminal",
  5.       "key":"alt+shift+m"
  6.   }]

Example 6: Remote linux server, reload/start nginx service

  1. [{
  2.       "name":"linux: reload nginx",
  3.       "command":"ssh user@ip '/opt/nginx/sbin/nginx -s reload'",
  4.       "type" : "terminal",
  5.       "key":""
  6.   },
  7. {
  8.       "name":"linux: start nginx",
  9.       "command":"ssh user@ip '/opt/nginx/sbin/nginx'",
  10.       "type" : "terminal",
  11.       "key":""
  12.   }]

Example 7: Convert markdown to pdf, doc, html with pandoc

What is pandoc? Pandoc is a software that can convert various file formats to each other. Pandoc is a swiss-army knife on files conversion.

After installation, it can be invoked through commands. pandoc official website

pandoc Example

  1. [{
  2.     "name": "Pandoc: md to pdf",
  3.     "command": "pandoc ${file} -o ${fileBasename}.pdf",
  4.     "type": "terminal",
  5.     "key": ""
  6.   },
  7.   {
  8.     "name": "Pandoc: md to doc",
  9.     "command": "pandoc ${file} -o ${fileBasename}.docx",
  10.     "type": "terminal",
  11.     "key": ""
  12.   },
  13.   {
  14.     "name": "Pandoc: md to html",
  15.     "command": "pandoc ${file} -o ${fileBasename}.html",
  16.     "type": "terminal",
  17.     "key": ""
  18.   }
  19. ]

Example 8: Install apk to Android phone

  1. [
  2.   {
  3.     "name": "install apk",
  4.     "command": "adb install ${file}",
  5.     "type": "terminal",
  6.     "key": ""
  7.     }
  8. ]

Example 9: Beta application testing

  1. [{  
  2.     "name": "Beta application testing on pgyer [https://www.pgyer.com/]",  
  3.     "command": "curl -F 'file=@${file}' -F 'uKey=xxxxxxx' -F '_api_key=xxxxxx'    https://upload.pgyer.com/apiv1/app/upload",
  4.       "type": "terminal",
  5.       "key": "alt+shift+m"  
  6. }]

Note：You need to apply uKey、_api_key. Website：https://www.pgyer.com/doc/api

Example 10：ftp

see document http://ask.dcloud.net.cn/article/35459

Example 11：Color Picker

The plugin currently does not require external command configuration, see its documentation for details：http://ext.dcloud.net.cn/plugin?id=146

Example 12： Batch compress js files

find is a command on mac. windows please write your own batch

  1. [{  
  2.     "name": "js batch compression",  
  3.     "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 'Compress the wrong file:'${i}; done",  
  4.     "type": "shell",  
  5.     "key": "alt+shift+e"  
  6. }]

Shortcut keys

Shortcut keys for external commands, for example:

  1. {
  2.       "name":"scp",
  3.       "command":"scp -r ${projectDir} user@ip:server_path",
  4.       "type" : "terminal",
  5.       "key":"alt+shift+m"
  6.   }

Variable description of external commands

Due to variables and shortcut keys, external commands are powerful.

  1. "command"、"workingDir": Use predefined variables to get the path information of the current file
  2. ${file}    The full path of the current file，Example: D:\files\test.txt
  3. ${fileName}    The file name of the current file，Example: test.txt
  4. ${fileExtension}    The extension of the current file，Example: txt
  5. ${fileBasename}    The file name without extension，Example: test
  6. ${fileDir} The full path of the directory where the current file is located，Example: D:\files
  7. ${projectDir} The full path of the project where the current file is located