Menu

Getting Started with Command-Line Interfaces

As developers, we have lots of exciting tools at our disposal. For CSS work, we can use preprocessors like Sass and Less to improve our workflow. For front-end interactions, we can extend our work with JS libraries and frameworks.

But one of the most powerful tools in our arsenal is one that is buried deeply in our computer: The command line.

Knowing how to use the command line is crucial if you want to take full advantage of modern development tools such as Grunt, Git, Gulp, npm, Bower, Sass, and much more. The ability to use command-line interfaces is an essential skill for front-end developers.

This tutorial will serve to introduce you to the powers of incorporating a command-line workflow into your development process.

This is what will be covered in this tutorial:

Why Use the Command Line?

We have plenty of graphical user interfaces (GUIs) that allow us to perform our tasks. But deep down below these apps are commands being run within the system. Often, we’re limited on the actions we can perform because of the design of the app.

The command line gives us more power over our system. It unlocks superpowers for our projects.

Some Terms You Need to Know

Throughout this tutorial, the following terminologies will be used.

Opening the Command Line

Mac OS

To open up the system command line, we can use the Terminal application.

To open up the Terminal app, go to your Applications folder, navigate to the Utilities directory and click on the Terminal app to open it.

If you want to have more control over the command line, I recommend you install iTerm2.

Windows

On Windows, the default command-line interface is the Command Prompt.

To access the Command Prompt, click the Start button, then click All Programs > click Accessories > click Command Prompt.

Command Prompt is DOS-based. Mac OS’s Terminal app is Unix-based. Many of the commands we’ll talk about in this tutorial won’t work or will behave differently on Windows.

For Windows users, I recommend installing a tool called cmder and using that moving forward. Another CLI option for Windows users is Git Bash,which you can access after installing Git for Windows.

Displaying Your Current Location in the File System

In Mac OS, the GUI we use to navigate our file system is the Finder app. On Windows, our GUI is Windows Explorer. Think of the CLI as a file system navigator without a GUI.

Typically, when the command line is opened for the first time, you may see the name of your computer and a file path representing the root directory of your file system.

To see our current position within the file system, we can type pwd and press Enter within the command line. pwd stands for print working directory.

Print Working Directory

Listing the Contents of a Directory

To be presented with a list of files and subdirectories in the current directory, use the ls command.

List Information

Navigating to Directories

With the command line, we can move to specific directories using the cd (change directory) command.

For example, on Mac OS, to navigate to the Desktop folder, we could type:

cd Desktop

Change Directory

If you would like to go up one directory, we can use two periods (..) as an argument of the cd command.

For example, let’s say our working directory is named SCSS. Its parent directory is named CSS:

CSS/
└── SCSS/

To make the CSS directory our working directory, we can type:

cd ..

We can state the relative path of a directory in order to move to subdirectories with just one cd command.

If we want to go to the projectFolder directory, which is a subdirectory located inside the Desktop directory, we can issue the following command:

cd Desktop/projectFolder

Creating New Files and Directories

Now that we have the power to navigate around our computer using a command-line interface, we can now create new files and directories.

Imagine this, we can navigate to our project folder and then create all our HTML, CSS and JS files using the command-line.

With the following commands, it’s important to know what directory you are currently in (e.g. your working directory). As a reminder, we can use the pwd command to see our current directory.

Creating a New Directory

To create a directory inside our working directory, we can use the mkdir (make directory) command followed by the name of the directory we want to create.

To create a directory named styles, we can issue this command:

mkdir styles

Make Directory

Creating a New File

To create a new file of any type, use the the touch command followed by the filename. You must specify the type of file you are creating with a filename extension.

The following command will create an empty HTML document named index.

touch index.html

Create File

Chaining Commands Together

Typing one command individually for each action we want to do is a bit tedious, so in order to speed up the process, we can chain commands together with &&.

Beware though: Each command has to successfully be executed in order for the next command to run.

The command below will:

  1. create an index.html file
  2. create a styles directory
  3. create a style.css file inside of the newly created styles directory
touch index.html && mkdir styles && touch styles/style.css

File Structure

Deleting Files and Directories

If we have the power to make directories and files with the command line, we of course have the ability to delete them.

Note: The files and directories you decide to delete won’t be moved to your Trash/Recycling Bin. You won’t be able restore your removed files. The file is effectively removed from the system.

The command for deleting files and directories is rm (remove).

Deleting a File

Let’s look first at deleting files using the rm command. Removing directories requires some extra instructions, which we will talk about in a short while.

We can delete files by typing rm followed by the name of the file we want to delete. Let’s delete the contact.html file.

rm contact.html

Removing File

Deleting a Directory

Removing a directory from the system is a bit trickier.

If we run the rm command using a directory name as an argument, we’re presented with an error. By default, the file system can’t remove directories because there may be files inside. Think of this as a safety measure.

However we can override that safety measure by specifying a command option. Command options are also referred to as flags or switches.

A command option provides extra instructions. It changes the default behavior of a command. For example, the default behavior of the rm command is not to allow us to delete a directory and to tell us we’re trying to delete a directory.

But if we use the -r option we can override the default behavior of the rm command. -r is short for recursive.

Let’s remove the js directory and all files inside that directory:

rm -r js

Removing File

Moving Files and Directories

To move a file or directory to a new location, we use the mv command. If you move a directory, all of its files and subdirectories will go along with it.

With the mv command, we need to provide two arguments. The first argument we provide is the name of the file or directory we want to move. The second argument is the location where we want to move the file/directory.

If we want to move main.css into the styles directory, this is the command we would issue:

mv main.css styles

Moving File

If you want to move a file and rename the file along the way, simply pass in the new name as the second argument of the command. For example, if we want to move a file called reset.css and move it into the styles directory under a new filename of normalize.css, this is the command we would use:

mv reset.css styles/normalize.css

Moving and renaming File

Copying Files and Directories

If you want to take an existing file or directory and make a copy of it somewhere else, we can utilize the cp (copy) command.

Like the mv command, we need to provide two arguments when issuing the cp command: the name of the file we want to copy, and the location of where the file will be copied to.

Copying a File

The following command will create a copy of a file named index.html in the current working directory. The copy of the file will be named contact.html.

cp index.html contact.html

Copying

Copying a Directory

When you copy a directory to another location, all the files and subdirectories are copied along with it.

Earlier, remember when we tried to delete a directory with the rm command, we were presented with an error message and the CLI prevented us from deleting the directory? We will encounter a similar issue when we try to copy a directory to another location. However, using the -r flag, we can override this default behavior.

The following command will copy the styles directory. The copy of the styles directory will be named stylesNew.

cp -r styles stylesNew

Copying Recursive

Conclusion

Here is a summary of all the commands we covered in this tutorial:

pwdPrint working directory
lsList contents of a directory
cd <directory-name>Change directory
mkdir <directory-name>Make directory
touch <filename.extension>Create a file
rm <filename.extension>Remove a file
rm -r <directory-name>Remove a directory recursively
mv <filename.extension> <target-directory>/<filename.extension>Move a file to a directory
mv <filename.extension> <target-directory>/<another-filename.extension>Move a file to a directory and rename the file
cp <filename.extension> <another-filename.extension>Copy a file
cp -r <directory-name> <another-directory-name>Copy a directory recursively

If you wish to discover more commands and learn how to customize the colours (sorry, I’m Canadian) of your terminal/command prompt I recommend checking out the video series called Command Line Power User by my colleague and friend, Wes Bos.

Until next time, happy command-lining!

Related Content

Drew Minns is a designer, developer and educator. He’s a Lead Instructor and Developer at HackerYou. Learn more about Drew on his site drewminns! and connect with him on Twitter, Dribbble and GitHub.

This was published on Apr 27, 2015

4 Comments

CLI is a step back in 1986. MS-DOS is dead and buried, leave it rest in peace. Every command listed in this page can be done with GUI without the risk of deleting a system folder by mistyping a command.

    Jacob Gube Apr 28 2015

    I’ll use a GUI over a command-line interface any day. Visual interfaces are great for complex tasks. But there are no GUIs (yet, and possibly ever) for many essential open source dev tools, like the ones mentioned in the intro. This tutorial is a primer/set-up for a couple of tutorials Drew’s working on.

Carl Topham Apr 29 2015

This is a great article. The command line is a necessity for web developers these days. Knowing the CLI is essential for Gulp, Grunt Node etc. Even if you can do it with a GUI doesn’t mean that learning the CLI isn’t a good idea, just be careful when your starting out and don’t type blindly into a terminal window! There are more than enough commands in this post for any web/front-end developer to use on a daily basis, especially if you are new to the field.

So helpful, thank you!

This comment section is closed. Please contact us if you have important new information about this post.

Partners