HBuilder控制台集成命令提示符(终端/CMD)功能

命令提示符程序(Linux里用终端,windows里用cmd.exe或者power shell ),是目前代码编辑器不可或缺的部分,大家喜爱的WebStorm、Sublime Text、 Visual Studio code、brackets 等都集成了终端功能,极大方便了开发者运行、测试、调试代码及项目构建等,可以说是较为重要的功能之一,缺少终端的编辑器都显得功能欠缺。而HBuilder就是前端编辑器里不能直接使用终端(cmd.exe)程序的编辑器了,这里我们就来弥补这种缺陷,使HBuilder用起来更给力。

工具/原料

  • HBuilder编辑器
  • CMD.exe (windows 系统自带程序)
  • 终端(MAC 系统自带程序)

1. CMD.exe/终端程序路劲

  1. 1

    要想给HBuilder加入命令提示符功能,就必须找其程序的安装路径好对HBuilder进行设置。

    cmd.exe 路径:C:\windows\system32\cmd.exe

    基本所有的Windows都是一样的。可以复制下来备后面步骤使用。

    HBuilder控制台集成命令提示符(终端/CMD)功能_第1张图片
    END

2. HBuilder添加[外部工具]cmd.exe

  1. 1

    2.1 cmd.exe属于外部工具,所以要在Hbuilder里新建才行,具体如下:

    运行——>外部工具——>外部工具 配置

    HBuilder控制台集成命令提示符(终端/CMD)功能_第2张图片
  2. 2

    2.2 新建一个名为cmd(随意命名)的外部工具:

    名称:cmd

    要执行的命令或文件:C:\Windows\System32\cmd.exe

    工作目录:${project_loc}

    其他的设置默认。

    ****说明****

    【工作目录】那里可以自定义的,HBuilder也提供了一系列的参数,不过cmd.exe在一般是基于文件夹来定位并执行的。我选的参数适用于任何一个HBuilder项目,这样的好处在于,不用对每一个项目或文件进行单独设置。不过我的这个有个bug,项目下的文件夹不能定位到,还需用cd定位。所以这里做一下修改

    *******

    工作目录:${selected_resource_loc}基于选中文件夹的绝对路径,

    *******

    这样呢基本能在所有文件夹使用了,不过你点文件来运行的话就会出错,因为cmd基于路径运行,像a.html这样的文件就不是一个文件夹就会报错。所有运行的时候最好选中文件夹之后再点cmd运行

    HBuilder控制台集成命令提示符(终端/CMD)功能_第3张图片
    HBuilder控制台集成命令提示符(终端/CMD)功能_第4张图片
  3. 3

    2.3 设置输出和运行方式

    我们都知道cmd.exe是集输入输出一体的程序,所以只有控制台是最合适的选择,并且要支持后台运行,例如在使用gulp-watch这样的插件的时候才能达到目的,设置如图:

    HBuilder控制台集成命令提示符(终端/CMD)功能_第5张图片
  4. 4

    2.4 运行效果

    经过前面的设置CMD.exe已经集成到HBuilder里面了,输入和输出都在控制台那里。

    ***提示***

    cmd.exe基于运行路径,所以一定先用鼠标选中要cmd.exe执行的文件夹再选择【cmd】运行。

    效果如图:

    HBuilder控制台集成命令提示符(终端/CMD)功能_第6张图片
    END

3. 输出乱码解决及控制台切换和退出cmd

  1. 3.1 解决输出乱码

    因为HBuilder一般默认用UTF-8编码(正常情况下UTF-8是能正常显示中文的),CMD.exe在控制台输出中文时会出现乱码。解决办法是选择其他支持中文的编码。中文可以选择GB2312或者GBK,这个不是很难解决,一种不行就换一种。

    HBuilder控制台集成命令提示符(终端/CMD)功能_第7张图片
  2. 3.2 cmd.exe和控制台切换

    我们的工作是同时进行的既要执行cmd.exe又要看文件运行错误日志——debug log 怎么办呢?在控制台那里的下拉倒三角图标即可随意切换。

    HBuilder控制台集成命令提示符(终端/CMD)功能_第8张图片
  3. 3.3 退出cmd.exe

    我们都知道cmd.exe是可以同时多开窗口的,意味着不退出的话就会一直执行。所以为了运行顺畅,我们最好在用完之后关闭/退出cmd.exe。退出时只要切换到cmd.exe视图点击红方块就可以退出cmd.exe(方块为灰色时是不工作--退出状态)。如图:

    HBuilder控制台集成命令提示符(终端/CMD)功能_第9张图片
    END

注意事项

  • 这里没写MAC下的设置是因为······你懂的!
  • 要点一:要执行的命令或文件:C:\Windows\System32\cmd.exe
  • 要点二:工作目录:${selected_resource_loc}可以按需选择变量
  • 要点三:不用的cmd的时候记得退出

你可能感兴趣的:(前端,杂谈)