提高效率小技巧:自定义终端命令或脚本文件

为什么会想到这个东西?

因为我在写代码时,经常遇到这种场景:

  1. 平时操作终端时,经常需要切换到桌面上,也就是经常手动输入:
cd ~/Desktop

输入的次数多了,就觉得烦了,虽然这个命令不长,但是还是想能不能输入一个 d 就直接实现切换到桌面目录呢?

  1. 做简单的小项目时,基本每次都会经历这样的步骤:

    创建一个 index.html 文件,在里面输入:

<!DOCTYPE html>
<html>
    <head>
            <link rel='stylesheet' href='./style.css'>
                ...
        </head>
    <body>
            ...
            <script src='./main.js'></script>
        </body>
</html>

然后创建对应的 css 文件和 js 文件;

这样的操作多了,就觉的很无聊,因为不仅操作步骤多,而且都是重复性的工作,能不能输入一个命令一件搞定呢?

基于上述场景,于是想到了使用自定义命令行指令和脚本;

alias

alias命令用于设置指令的别名,我们可以利用alias,来自定义指令的别名;

如果在终端里只输入 alias,就会列出目前所有别名的设置:

如何自定义一个指令呢?

步骤

1.首先进入用户目录:

cd ~

2.使用 VS Code 打开当前目录下的 .bashrc文件:

code .bashrc

当然这样写也可以:

code ./.bashrc

./ 就是代表当前目录的意思,这里不推荐输入因为 .bashrc 本身文件名就有点 . 所以加上当前目录的 ./ 容易眼花(别问我是怎么得出这个结论的,踩几次关于点的坑就明白了 -.-#)

3.在 VS Code 输入自定义指令的别名:

alias d="cd ~/Desktop"

或者熟悉 Linux 的也可以这样写:

echo 'alias d="cd ~/Desktop"' >> .bashrc

这里要注意: 给指令起的名字和指令之前的 等于号前后千万不要加空格!千万不要加空格!千万不要加空格!,就是 d="cd ~/Desktop" 里的这个等号两边不要加空格!

因为自己写 a = a + 1 这种方式写习惯了,不自觉的加了一个空格,于是花了很多时间来排查错误,最后发现是空格的原因。

4.输入完之后保存,使用 source 让命令生效:

保存了以后,在命令行里输入 d 还是提示没有这个命令:

d
bash: d: command not found

为啥?因为还没生效呢!要使用 source 命令让其生效:

source .bashrc

这样,你就可以使用自己自定义的指令来进行命令行操作了!

5.效果展示:

alias 的用途有很多,比如 windows 的 cmd,里面清屏的指令是 cls,而 bash 里的清屏指令是 clear,如果你习惯了用 cls,觉的 clear 不好用,就可以这样来替换:

alias cls="clear"

总之 alias 是个很好用的命令,具体用途可以自己根据不同的使用需求去思考。

自定义一个脚本文件

上面的 alias 适用于单句命令的设置,那么假如想之前说的第二个场景那样,有多个操作、多个命令怎么办呢?

这时我们就可以自定义一个脚本文件,来帮我们一次性执行多条命令。

步骤

1.创建一个文件

touch newpj

这里我是在 桌面这个文件夹 里创建了一个 newpj 文件,如果你操作的时候是在别的文件夹里请看好是哪个文件夹,防止后面搞错!另外这个文件是 没有后缀 的。

为什么叫 newpj?因为我是想创建一个文件夹,里面有 html、css 和 js文件的,所以 newpj就代表 new project 的缩写。自定义一个脚本名,爱叫啥就叫啥,这个无所谓。

2.用 VS Code 打开这个文件:

code newpj

然后输入:

mkdir 1
cd 1
touch index.html
touch style.css
touch main.js

3.给脚本文件添加可执行权限

chmod +x newpj

windows 不做这一步也没事,但是最好还是养成习惯;

4.使用脚本:

第一种方法:

./newpj

注意这里一定要加 ./,不然会报错!那我不想加 ./,有别的办法使用脚本吗?

第二种方法:

sh newpj

为什么这样就不用加 ./ 了呢?

因为 ./ 代表的是当前目录的意思,加上后命令行会直接找到当前目录下的这个文件去执行,如果不加,就找不到了。

而 sh 其实就是 bash 的缩写,你在前面添加上 sh 后,bash自动去寻找这个文件,找到后执行。

5.效果:

执行完后,桌面上果然就多了一个文件夹,并且里面有我们需要创建的文件:

问题和优化

自定义文件夹名称

上面仅仅是创建了一个简单的脚本,还有很多的问题。

比如,当我们第二次运行这个脚本的时候,就会报错:

报错提示说:没办法创建1文件夹,因为已经有一个了。

那我们不能每次项目文件夹都起名叫1吧?能不能有个办法,让我们输入一个参数,在创建的时候自定义文件名呢?

办法如下:

用 VS Code 打开我们的脚本文件,然后把文件夹1改成 $1

这时我们再去执行脚本:

./newpj

会提示我们参数缺失:

所以我们在执行的时候,要加上参数!

./newpj demo1
./newpj demo2
./newpj demo3

这样就能实现自定义创建的项目文件夹名称了:

创建时就初始化文件里的内容

运行脚本后,的确能生成我们需要的 html、css 和 js 文件,但是打开发现文件内容是空的,我想让文件在生成时就有初始化内容行不行?

可以!我们再次用 VS Code 打开 newpj 文件,添加一个 echo 语句:

mkdir $1
cd $1
touch index.html

echo '<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>标题</title>
        <link rel="stylesheet" href="./style.css">
    </head>
    <body>
        <script src="./main.js"></script>
    </body>
</html>' >> index.html

touch style.css
touch main.js

这里注意两个地方:

一是用 引号 把我们要填写的内容给包裹住,二是注意 两个大于号 >> 不要输入成一个;

关于 echo命令的 > 和 >>

对 echo 命令不熟悉的可以看下,熟悉的直接略过看下面即可。

>    表示覆盖
>>   表示追加

假如我们有一个 1.txt 文件,里面的内容是 111:

下面我们来实验一下:

echo "222" > 1.txt

可以看到我们输入的内容,覆盖了原本的内容,所以一个大于号 > 代表覆盖的意思;

下面试试两个大于号 >>:

echo "333" >> 1.txt

我们输入的内容没有覆盖之前的内容,而是追加在后面了,所以两个大于号 >> 代表追加的意思;

提示:每次执行完 echo 命令后,我们打开 1.txt 文件查看,看完后请先 关闭文件,因为 Win 系统里你在打开文件的时候,外部就不好再操作这个文件了。所以如果你发现照着我的步骤执行了却没效果,那就是因为你看完没关闭文件,请先关闭文件后,再执行命令。

不加./ 和 sh 直接用命令

伟大的鲁迅先生说过:偷懒是人类进步的动力。

开个玩笑,但是人类在偷懒这件事的追求上的永无止境的。

于是我们会想,./ 和 sh 我都懒得输,能不能不输入也能执行我们的脚本文件呢?

可以的,这里需要我们把文件路径加到系统环境变量的 Path 里:

鼠标右击 桌面上的此电脑图标,选属性 ( 这里用Win10举例,Win7桌面上此电脑名字叫我的电脑 ),然后跟着图片操作:

  1. 在脚本文件开头加上一串字符:
#!/usr/bin/env sh

如图所示:

加好之后保存,然后就可以关闭脚本文件的编辑了。

  1. 高级系统设置:

  1. 环境变量

  1. 找到下面的系统变量,双击 Path:

  1. 新建,然后输入自己的脚本文件的所在目录

  2. 重启终端,直接输入我们的脚本文件名:

newpj demo4

搞定,这样就实现了:不加 ./,也不加sh,只输入脚本文件名称就能执行我们的脚本文件。

操作包括:创建了 demo4 目录,生成了 index.html 、style.css、main.js 文件,并且 index.html 文件在生成时自动有了初始化的内容。

关于 shebang 符号 !#

上面在脚本文件的开头部分,加上的内容:

#!/usr/bin/env sh

其实这是个 shebang 符号,看起来是一个注释内容,实际上是告诉系统,怎么执行这个文件。sh 就是 bash 的缩写,告诉系统,用 bash 来执行这个脚本文件。

即文件中存在 shebang 时,系统看到这个内容,会把这些内容当作解释器指令,然后去调用。

原文链接:juejin.im

上一篇:Vue3 响应式原理剖析
下一篇:element的table组件在flex布局下宽度不能自适应

相关推荐

  • 🍊仿Element自定义Vue组件库

    前言 🍊 市面上目前已有各种各样的UI组件库,他们的强大毋庸置疑。但是有时候我们有必要开发一套属于自己团队的定制化组件库。还有时候原有的组件不能满足我们的各种需求,就需要在原有的组件上进行改造...

    3 个月前
  • 面板拖拽之vue自定义指令

    前言 在指令里获取的this并不是vue对象,vnode.context才是vue对象,一般来说,指令最好不要访问vue上的data,以追求解耦,但是可以通过指令传进来的值去访问method或ref之...

    2 年前
  • 静态网站自定义与构建(二)——VuePress搭建个人博客

    很早之前使用hexo搭建的个人博客由于年久失修逐渐被遗忘,为了激励自己多积累多动笔多思考,所以使用vuepress重新搭建个人博客。相比于hexo,vuepress定制起来也更加灵活,对于熟悉vue的...

    9 天前
  • 静态网站自定义与构建(一)——静态网站生成器对比

    前言 静态网站和动态网站相比,比较明显的特征就是其不需要后台服务端支持,仅包含html、js、css前端三剑客。常见的静态网站用途有博客系统,文档管理系统,不过我还看到过有老的新闻网站也用静态系统.....

    1 个月前
  • 钉钉小程序 之 自定义组件的使用,以及父组件与子组件(自定义组件)传值

    目录: 本机环境 自定义组件(子组件) 页面中引入(父组件引入子组件) 父组件(使用自定义组件的页面)传值给子组件 子组件(自定义组件)传值给父组件 备注 一、本机环境 本机系统: Mac 小...

    6 个月前
  • 采用shell自定义脚本,控制集成部署环境更加方便灵活

    Jenkins 是一个开源软件项目,旨在提供一个开放易用的软件平台,使软件的持续集成变得可能。现在软件开发追求的是效率以及质量,Jenkins使得自动化成为可能! 亮点 采用shell自定义脚本,控制...

    2 年前
  • 逻辑强化系列(一):彻底搞懂自定义组件使用 v-model

    前言 阅读本文前,希望你已经彻底理解了语法糖 v-model 以及父子组件之间的通讯方法 v-model 在组件上使用 v-model 之前首先要知道,v-model 的用处以及实际操作流程,以方便理...

    5 个月前
  • 通过字符串var [复制]获得自定义对象属性

    CommunityJay-Nicolas Hackleman提出了一个问题:Getting a Custom Objects properties by string var [duplicate],...

    3 年前
  • 通过nodejs实现自定义命令

    我们开发用到的一些库都有自己特有的命令,如webpack,babel和jest等。通过给这些命令输入不同的参数,可以得到相应的功能。通过篇文章,你将学会如何一步步地编写运行在弄的环境的自定义命令。

    3 年前
  • 通过JavaScript的自定义富文本实现短信模板功能

    前言 公司最近有一个发送短信模板的功能实现需求。在网上找到一篇范文,发现并不适合我们的项目,引用了40%的内容,20%的代码,改成了自己的一个封装函数。 此demo在于实现自定义的短信模板,比如有需求...

    1 年前

官方社区

扫码加入 JavaScript 社区