前端工程师的必备技能：命令行

终端：接收命令行输入的软件 shell：是一个解释器，作为命令语言，它交互式解释和执行用户输入的命令或者自动地解释和执行预先设定好的一连串的命令 bash：是 shell 的一个实现，如果把 shell比作手机.，那 bash 就是手机品牌华为/苹果。

命令行的本质：是可执行文件

常用命令缩写

  • 把动词缩写，就变成了命令 | 英文 | 缩写命令 | 翻译 | 英文 | 缩写命令 | 翻译 | | —- | —- | —- | —- | —- | —- | | file |
    | 文件 | link | ln | 链接 | | make | mk | 制作 | find | find | 找到 | | move | mv | 动 | echo | echo | 回声 | | remove | rm | 删除 | touch | touch | 触摸 | | copy | cp | 拷贝 | change | cd 中的 c | 改变 | | list | ls | 列表 | directory | cd 中的 d | 目录 / 文件夹 | | recursive |
    | 递归的 | force |
    | 强制 |

终端里如何复制粘贴

  1. 在 cmder 里
  • 粘贴是鼠标右键
  • 粘贴是 Shift + Insert
  • 复制是用鼠标选中即自动复制
  1. 在 Git Bash 里
  • 粘贴是鼠标右键
  • 粘贴是 Shift + Insert
  • 复制是用鼠标选中，然后右键，选中 copy

  • 复制是用鼠标选中，然后按 ctrl + insert

    命令行常犯的错误

  • 少/多写 空格

  • 用来中文符号
  • 进错目录了
  • 拼写错误
  • 用的不是 Bash 而是 CMD

快捷键

  • ctrl + c 急救快捷键，用于中断一个命令
    • 如果发现不小心删除了操作系统，请火速按下 ctrl + c
    • 其他任何问题，都可以通过 ctrl + c来中断
  • alt + .：把上一次的参数直接复制下来

  • 回车可以代替分号，不管前面一条是否成功，直接执行后面的语句

    文件路径

    进入命令行第一件事：**cd ~** 改变目录

  • cd ~/Desktop：切换到桌面

  • cd TK：切换到当前目录下的 TK 文件夹
  • cd ./TK：切换到当前目录下的 TK 文件夹
  • cd ..：切换到上一层目录
  • cd ../../TK：切换到上一层的上一层目录下的文件夹

文件如何增删改查

查：查看文件或目录

1. 查看当前目录绝对路径：**pwd**
image.png

  • 查看 ls 所在路径：which ls

image.png
image.png
2. 查看当前目录内容：**ls**

  • **ls** 默认不显示隐藏文件
  • **ls -a** 列出所有文件，包含隐藏文件
  • **ls -al**列出所有文件，包含隐藏文件，文件显示详情

image.png
3. 查看指定目录内容：**ls 路径**
image.png
4. 查看文件内容

  • **cat 路径**：文件内容全部显示

image.png

  • **head 路径**：默认显示前十行
    • head style.css **-n** 2：显示文件前 2 行内容
    • head style.css **-c** 2：显示文件前 2 个字符的内容
  • **tail 路径**：默认显示后十行
    • tail style.css **-n** 5：显示文件后 5 行内容
    • tail style.css **-c** 5：显示文件后 5 个字符的内容
  • **less 路径**：分页显示文件内容
    • less 进入一个地方默认按 q 键退出
    • 当命令行有选中高亮内容时，按 q 键无法退出，需先按 Esc 取消选中后，再按 q 键退出。

增：创建文件

1. 创建 1.txt

  • **touch**：只能创建空文件
    • touch 1.txt：摸一下 1.txt 文件，如果该文件不存在就创建该文件
    • touch index.html style.css main.js：创建多个文件
  • **echo**：显示字符串
  • echo hi **>** 1.txt：如果 1.txt 文件不存在，就创建文件内容为 hi 的 1.txt 文件，单 > 表示覆盖内容
  • echo hihi **>>** 1.txt：双 >> 表示追加 1 行内容
  • echo **-e** "1**\n**2" **>>** 1.txt：表示追加 2 行内容，\n 表示回车

2. 创建目录

  • mkdir a：创建目录 a
  • mkdir -p a/b/c：-p 意为要输入一个完整路径，就会把 a/b/c 当作一个有层级的目录

3. 同时创建多个文件

  • touch 1.txt 2.txt

4. 同时创建多个目录

  • mkdir a b c
  • mkdir -p a/b/c a/d/c：同时创建多个有层级（嵌套）的目录

5. 复制文件

  • cp 1.txt 2.txt ：将 1.txt 拷贝到 2.txt

6. 复制目录

  • cp -r a b：必须加 -r 才会复制目录
    • -r 递归处理，将指定目录下的所有文件与子目录一并处理。

删：删除文件

1. 删除文件 1.txt

  • **rm 1.txt**

2. 删除目录 a/

  • **rm -r a**：-r 递归的删除 a

3. 删除有内容的目录 a/

  • **rm -rf a** ：-rf 表示强制执行删除

    千万别作死误删系统文件，除非想重装系统

4. 如何避免误删系统文件？

  • 给用户创建一个可以随便玩的文件
  • 这个目录就是【用户目录】
  • 缩写为 **~** （英文符号）

    cd ~：进入命令行的第一件事

改：修改文件或目录

1. 修改文件内容

  • 用 **echo** 追加内容
  • **code 1.txt**：用 code 打开 1.txt
  • **start 1.txt** 用 start 默认程序打开1.txt

2. 追加文件内容

  • 同上

3. 清空文件

  • **echo '' > 1.txt**

4. 移动文件/目录

  • 用 **mv** 移动
    • mv 1.txt git-demo-1：将 1.txt 移动到 git-demo-1 中
    • mv git-demo-1/1.txt .：将 git-demo-1 中的 1.txt 移动到当前目录
    • mv 1.txt 2.txt：将 1.txt 移动到当前的 2.txt，不换目录，就在这个目录做，意思和重命名一样

5. 重命名文件/目录（同上）

  • 对命令行来说移动一个文件和重命名文件是一样的操作，都是 **mv**

6. 修改文件最后更新时间

  • **touch**：更新文件的最后更新时间

    目前已知 **touch** 有两个作用：

    1. 在文件不存在的时候创建一个空文件
    2. 更新文件的最后更新时间

查看命令手册

  • 1. 查看帮助手册：（难用）
  • **man xxx**：window 不支持
  • **xxx --help**
    • ls --help：得到一个很长的文档
    • ls --help | less：用 less 翻页查看
  • 2. **tldr** 神器（更推荐）
  • 安装 npm i -g tldr 或 yarn global add tldr
  • 背景：帮助手册太长难读，too long;didn't read. 缩写 tldr
  • 步骤：
    • 安装 yarn global add tldr
    • tldr --version：查看版本
    • tldr ls：太长不读 ls，会显示 ls 的常用用法

image.png

如何组合命令

1. && 操作

  • 只有当第一条命令成功后，才会执行另一条

image.png

2. ；（分号） 操作

  • 回车可以代替分号
  • 不管成败，都执行另一条 | image.png | image.png | | —- | —- |

3. 如何查看上一条命令是否顺利执行？

命令 运行截图
echo $? image.png
image.png
  • 返回值为 0，执行成功
  • 返回值为非 0，执行失败

如何写脚本文件

  • 把多行命令放在一个脚本里面，这个文件就叫脚本文件
  • 文件就是命令，命令就是文件；
  • 前提是加了 **PATH** ，且有执行权限

把命令变成脚本文件

步骤：

  • 创建一个文件，后缀无所谓，可以没有
  • 添加执行权限（Windows 没有这个概念，跳过）
  • 把要执行的命令写到文件里
  • 运行 [ sh 正确的路径 ] 即可执行 （sh 是缩写的 bash）
  • 如果加了 shebang，删掉 sh 也能执行（可选）
  • 但是必须用正常的路径
  • 如果加了 PATH ，可以只用文件名就能执行

  • 这个文件就是脚本文件，写是的 bash，所有是bash 脚本文件

    1. $ touch jben        # 新建脚本
    2. $ code jben         # 使用VSCode打开脚本并进行编辑
    3. $ chmod +x ./jben   # 添加权限
    4. $ ./jben            # 执行

  • chmod +x ./jben ：+x 就是加上可执行权限，此操作在 window 上是多余的跳过，在 mac 上就必须执行这句话

  • ./jben：必须加 ./ 不加不执行

  • 不可重复执行 ./jben ，已有文件不可重复创建

    如何快速创建内容相同的脚本

  • 删除已创建的脚本文件，重新执行 ./jben 即可。

  • 给脚本文件一个参数，告诉命令行一键创建名为 xx 的脚本文件 ```shell 代码2 $ code ./jben # 进入 VSCode 编辑给脚本传参 $ ./ jben xxx # 创建了一个叫 xxx 的目录 $ ls # 用 ls 查看创建的目录 $ ./ jben xxx # 重复上传名为 xxx 的目录会报错 $ ./ jben yyy # 创建了一个叫 yyy 的目录
  2. - **如何接收参数 ？**
  3. | 代码 1 的脚本内容 | 代码 2  的脚本内容 |
  4. | --- | --- |
  5. | ![image.png](https://cdn.nlark.com/yuque/0/2021/png/22104007/1636124305043-b46d9788-f204-4733-9355-3acca948fe98.png#clientId=ub60dc1cf-5269-4&from=paste&height=145&id=ua6467106&margin=%5Bobject%20Object%5D&name=image.png&originHeight=290&originWidth=564&originalType=binary&ratio=1&size=29208&status=done&style=none&taskId=u753b352a-085a-4443-a526-51f2a8aae9e&width=282) | ![image.png](https://cdn.nlark.com/yuque/0/2021/png/22104007/1636124241569-d0f7a68d-bd2c-453b-8cfb-06d2072ecfd8.png#clientId=ub60dc1cf-5269-4&from=paste&height=144&id=ud3ab9c65&margin=%5Bobject%20Object%5D&name=image.png&originHeight=287&originWidth=887&originalType=binary&ratio=1&size=42106&status=done&style=none&taskId=u6f5896fc-85e1-40ac-9c0e-58f748948ec&width=443.5) |
  7. <a name="e8qfa"></a>
  8. #### 脚本的厉害之处？
  10. - 可以把之前用鼠标不停的重复的事情全部写到一个文件里面，然后接收一个参数，一键搞定。
  11. <a name="wyczN"></a>
  12. #### 关于 `shebang`
  14. - 什么是 `shebang` ？
  15.    - `shebang` 是一行注释，加上 `shebang` 就可以指定用什么程序来运行当前的脚本。
  16.    - 一个操作系统可能支持多个脚本。比如：`js` 脚本和 `bash` 脚本，就需要指定到底是用什么来执行当前文件
  17. - 如何添加 `shebang` ？
  18.    - 搜索 `[Shebang (Unix) - Wikipedia](https://en.wikipedia.org/wiki/Shebang_(Unix))` ，复制 `#!/usr/bin/env sh`
  19.    - 在脚本第一行粘贴 `#!/usr/bin/env sh`
  20. - 为什么要添加 `shebang` ?
  21.    - 不加的话在 mac 上，或者 Linux 上执行脚本是不能的。
  22.    - 为了保险起见，建议加上 `shebang`
  23. ```shell
  24. 添加 shebang
  25. $ code jben            // 使用VSCode打开脚本并进行编辑
  26. // 在脚本第一行加 shebang,复制#!/usr/bin/env python3，改 python3 为 sh 执行当前当前文件
  27. $ ./jben ddd        // 创建了一个叫 ddd 的目录

如何不加 ./ 执行脚本文件 ？

  • 把脚本目录加到 PATH 里即可。
    • 用 everything 搜索文件地址，右键复制完整路径和文件名
    • 或者直接在文件夹找到文件地址复制
    • 右键此电脑—属性—高级系统设置—环境变量—双击 PATH—新建—粘贴地址—确定
    • 重启 cmder
    • 就可以不加 ./ 执行脚本文件

什么是 PATH ，如何添加，有什么用？

作用：

  • 如果脚本文件的路径加入了 PATH ，则可直接用文件名来调用对应脚本
    • 比如 node.js 就是因为它把它所在目录放在 PATH 里面，所以可以直接运行 node，其实就是运行 node.exe。

  • 不加的话就必须写 **./**+ 文件名 或者写它的绝对路径

    如果有两个文件名相同的脚本在 PATH 里，先执行哪一个？

  • 在 window 里：

    • 优先执行后缀为 .exe 的脚本文件
    • 如果后缀都为 .exe，就按照在 PATH 管理变量里的优先级（先后顺序）执行
  • 在 mac 里：
    • 是 node 就是 node，没有 .exe

部分资料来源 ：饥人谷 - 方方老师