开始使用命令行接口

WebFX总统。Bill在互联网营销行业拥有超过25年的经验,专长于搜索引擎优化、用户体验、信息架构、营销自动化等。William在Shippensburg和MIT的科学计算和教育背景为MarketingCloudFX和WebFX的其他关键研究和开发项目提供了基础。

作为开发人员,我们有许多令人兴奋的工具可供使用。对于CSS工作,我们可以使用像Sass和Less这样的预处理器来改进我们的工作流程。对于前端交互,我们可以使用JS库和框架来扩展我们的工作。

但我们武器库中最强大的工具之一是深埋在电脑里的:命令行.如果您想充分利用现代开发工具,那么了解如何使用命令行是至关重要的咕哝着说Git、吞咽、npm鲍尔、萨斯等等。对于前端开发人员来说,使用命令行界面的能力是一项必不可少的技能。本教程将向您介绍将命令行工作流合并到您的开发过程中的强大功能。

这是本教程将涉及的内容:

  • 为什么使用命令行?
  • 你需要知道一些术语
  • 打开命令行
  • 显示文件系统中的当前位置
  • 列出目录的内容
  • 导航到目录
  • 创建新的文件和目录
  • 一起链接命令
  • 删除文件和目录
  • 移动文件和目录
  • 复制文件和目录

为什么使用命令行?

我们有许多允许我们执行任务的图形用户界面(gui)。但在这些应用程序的深处是在系统内部运行的命令。

通常情况下,由于应用程序的设计,我们能够执行的操作受到了限制。命令行让我们在系统中拥有更大的权力。为我们的项目开启超能力。

一些你需要知道的术语

在本教程中,将使用以下术语。

  • 命令行界面:这指的是你输入命令的软件。可以使用各种命令行界面,下面将讨论其中一些选项。Mac操作系统默认命令行界面为终端应用程序。

    对于Windows用户来说,它是命令提示符

  • CLI命令解释器:命令行接口通常也称为命令语言解释器。CLI。在本教程中,这个术语与命令行界面可以互换使用。

  • 目录:这个等于a文件夹在你的电脑。
  • 工作目录:这是您所在的当前目录。
  • 命令选项/命令标志:这些是更改命令默认行为的附加指令。

打开命令行

Mac OS

要打开系统命令行,我们可以使用终端应用程序。打开终端应用程序,去你的应用程序文件夹,导航到公用事业公司目录,点击终端应用程序打开它。如果您想对命令行有更多的控制,我建议您安装iTerm2

窗户

在Windows上,默认的命令行界面是命令提示符。要访问命令提示符,请单击开始按钮,然后单击所有程序>点击配件>点击命令提示符命令提示符是基于dos的

Mac OS的Terminal应用程序是基于unix的。我们将在本教程中讨论的许多命令不会起作用上的表现也不同在Windows上。对于Windows用户,我建议安装一个名为cmder的工具,并继续使用它。Windows用户的另一个CLI选项是Git Bash,您可以在安装后访问它Git Windows

显示您在文件系统中的当前位置

在Mac OS中,我们用于导航文件系统的GUI是在Windows上,我们的GUI是Windows资源管理器.可以将CLI看作是没有GUI的文件系统导航器。通常,当命令行第一次打开时,您可能会看到计算机的名称和表示文件系统根目录的文件路径。

要查看我们在文件系统中的当前位置,可以输入松材线虫病并在命令行中按Enter键。松材线虫病代表打印工作目录打印工作目录

列出目录的内容

要显示当前目录中的文件和子目录列表,请使用ls命令。列表信息

导航到目录

在命令行中,我们可以使用cd改变当前工作目录)命令。例如,在Mac OS上,导航到桌面文件夹,我们可以输入:

cd桌面

改变当前工作目录如果您想要向上一个目录,我们可以使用两个句点(..)作为cd命令。

例如,假设我们的工作目录名为SCSS.命名其父目录CSS

CSS / ? ?SCSS /

为了使CSS目录我们的工作目录,我们可以输入:

cd . .

为了移动到只有一个目录的子目录,我们可以声明一个目录的相对路径cd命令。如果我们想去projectFolder目录中的子目录桌面目录下,我们可以发出以下命令:

cd桌面/ projectFolder

创建新的文件和目录

现在我们可以使用命令行界面在计算机中导航,现在我们可以创建新的文件和目录。想象一下,我们可以导航到我们的项目文件夹,然后使用命令行创建所有的HTML、CSS和JS文件。使用下面的命令,了解您当前所在的目录是很重要的(例如:

你的工作目录)。提醒一下,我们可以用松材线虫病命令查看当前目录。

新建目录

要在工作目录中创建一个目录,可以使用mkdir(做目录)命令后跟我们要创建的目录的名称。创建名为风格,我们可以发出以下命令:

mkdir风格

做目录

创建新文件

要创建任何类型的新文件,请使用触摸命令后跟文件名。您必须指定要创建的文件类型和文件名扩展名。下面的命令将创建一个名为指数

触摸index . html

创建文件

一起链接命令

为我们想要执行的每个操作单独输入一个命令有点乏味,因此为了加快进程,我们可以将命令链接在一起& &不过要注意:为了运行下一个命令,必须成功地执行每个命令。下面的命令将:

  1. 创建一个index . html文件
  2. 创建一个风格目录
  3. 创建一个style.css文件中创建的风格目录
Touch styles/style.css

文件结构

删除文件和目录

如果我们有能力用命令行创建目录和文件,我们当然也有能力删除它们。注意:你决定删除的文件和目录不会被移动到你的回收站。您将无法恢复被删除的文件。

文件被有效地从系统中删除。删除文件和目录的命令为rm删除).

删除一个文件

首先让我们看看如何使用rm命令。删除目录需要一些额外的指令,我们稍后将讨论这些指令。我们可以通过键入来删除文件rm后面跟着我们想要删除的文件的名称。

让我们删除contact.html文件。

rm contact.html

删除文件

删除一个目录

从系统中删除目录有点棘手。如果我们运行rm使用目录名作为参数的命令,我们将得到一个错误。默认情况下,文件系统不能删除目录,因为其中可能有文件。

把这当做安全措施。但是,我们可以通过指定命令选项.命令选项也被称为旗帜开关

命令选项提供额外的说明。它改变命令的默认行为。的默认行为rm命令是不允许我们删除一个目录,并告诉我们正在尝试删除一个目录。

但是如果我们用- r选项的默认行为rm命令。- r是短暂的递归.让我们删除js目录下的所有文件:

rm- rjs

删除文件

移动文件和目录

要将文件或目录移动到新位置,我们使用mv命令。如果您移动一个目录,它的所有文件和子目录也会随之移动。与mv命令时,我们需要提供两个参数。

对象的名称是我们提供的第一个参数要移动的文件或目录。第二个参数是位置我们想要将文件/目录移动到哪里。如果我们想搬家的话main.css风格目录下,这是我们要发出的命令:

mv main.css风格

移动文件如果您希望移动一个文件并在此过程中重命名该文件,只需将新名称作为该命令的第二个参数传入。

例如,如果我们想要移动一个名为reset.css把它移到风格目录下的新文件名normalize.css,这是我们要使用的命令:

mv / normalize.css reset.css样式

移动和重命名文件

复制文件和目录

如果您想要获取一个现有的文件或目录,并将其复制到其他地方,我们可以使用cp复制)命令。就像mv命令时,我们需要提供两个参数cp命令:文件名称我们想要复制,而位置文件将被复制到的位置。

复制一个文件

下面的命令将创建一个名为index . html在当前工作目录中。文件的副本将被命名contact.html

cp index . html contact.html

复制

复制一个目录

当您将一个目录复制到另一个位置时,所有的文件和子目录都将随之复制。早些时候,还记得我们试图使用rm命令,我们被呈现一个错误消息和CLI阻止我们删除目录?当我们试图将一个目录复制到另一个位置时,会遇到类似的问题。

然而,使用- r标志,我们可以覆盖这个默认行为。下面的命令将复制风格目录中。的副本风格目录将被命名为stylesNew

cp -r styles stylesNew

递归复制

结论

下面是本教程中涉及到的所有命令的总结:

松材线虫病 打印工作目录
ls 列出目录的内容
cd <目录名称> 改变当前工作目录
mkdir <目录名称> 做目录
触摸< filename.extension > 创建一个文件
rm < filename.extension > 删除一个文件
rm - r <目录名称> 递归删除目录
mv <文件名。扩展> <目标目录> / < filename.extension > 将文件移动到目录
mv <文件名。扩展> <目标目录> / < another-filename.extension > 将文件移动到目录中并重命名文件
cp <文件名。扩展> < another-filename.extension > 复制一个文件
Cp -r 递归复制目录

如果你希望发现更多的命令,并学习如何自定义你的终端/命令提示符的颜色(抱歉,我是加拿大人),我建议查看视频系列称为命令行超级用户我的同事兼朋友韦斯·博斯下次见,愉快的命令行!

相关内容

了明尼苏达州是设计师、开发者和教育家。他是首席讲师和开发人员HackerYou.在他的网站上了解更多关于Drew的信息drewminns !

并与他建立联系推特Dribbble而且GitHub

WebFX职业

加入我们的使命,为全球企业提供行业领先的数字营销服务——同时建立您的个人知识和个人成长。

我们招聘! 视图30 +职位空缺!