refactor u

Take Command of the

Command Line

presents:

Take Command of the Command Linerefactor u

If you want to become a developer, you’re going to need to understand the command line.

It’s powerful.

When you know how to use it, you can navigate your dev environment quickly and automate your workflow.

After today’s intro you too will be taking command, unlocking the power of this tool!

refactor uTake Command of the Command Line

Press COMMAND and space bar together making the Mac “search bar” appear.

In the search bar type “terminal”.

Click the Terminal application to open it. Terminal looks like a black canvas with a silver frame.

With Terminal open, go to your Dock. CTRL-click the Terminal icon. Select Options->Keep In Dock. See figure 1-1 in the next slide.

Setup

Take Command of the Command Linerefactor u

Figure 1-1:

SetupWhat you achieved:

Congrats! If you’ve made it this far, you now have your Terminal directly accessible on your dock, the first step towards taking command of the command line.

Now click on the Terminal icon to launch Terminal.

Take Command of the Command Linerefactor u

Type the following : $ pwd

$ pwd (present working directory)

You just typed your first command. It shows in which directory you are currently working. Directory is just a fancy name for folder. Working in the Mac OS GUI, you are probably accustomed to moving in and out of folders. Developers navigate in and out of directories on the command line and $ pwd is a great way to see where you are.

What you will see: /Users/yourusername

What you achieved:

A quick word before we start typing commands, the ‘$’ in front of the command is there to orient you. It’s the prompt. You may have a ‘$’ or maybe a ‘>’ on your command line but you don’t type the ‘$’ before the command.

Take Command of the Command Linerefactor u

Type the following : $ mkdir test

$ mkdir (make directory)

You created a directory called test. You can’t see it but assuming that you did not receive an error message after typing the command, the directory is there.

What you achieved:

Take Command of the Command Linerefactor u

Type the following : $ cd test

$ cd (change directory)

You changed directories. You can’t see the change. Or, can you? How do developers see their present working directories? After you type the command to see where you are, create two more directories called test01 and test02 using $ mkdir.

What you achieved:

Take Command of the Command Linerefactor u

Type the following : $ ls

$ ls (list directory)

$ ls is the command to list the contents of a directory. Being inside of the directory test, which you created, typing $ ls revealed two other directories. Try a couple of other commands. Type $ ls -l. Type $ ls -la. What do you see?

What you will see: test01 test02

What you achieved:

Take Command of the Command Linerefactor u

Type the following : $ touch myfile01.txt

$ touch (create file)

You created an empty text file called myfile01.txt. $ touch does this. Create a couple more files. Call them what you want, but, realize that if the files have spaces in the names you will need to add the ‘\’ character in front of each space to escape it ($ touch my\ file02.txt). If escaping sounds too complicated then just keep all spaces and special characters out of your filenames for now and name the files something simple like myfile02.txt and myfile03.txt.

What you achieved:

Take Command of the Command Linerefactor u

Type the following : $ rm myfile01.txt

$ rm (remove file)

You just permanently removed myfile01.txt! It’s gone forever! Unlike the Mac OS GUI, there really is no trash can in the command line. When you remove files and directories they are gone for good. Remember, the command line is powerful and with great power comes great responsibility. Use $ rm carefully! Now that myfile01.txt is gone, use $ ls to see what’s left in the directory. Try removing the test01 directory. What happens when you type $ rm test01?

What you achieved:

Take Command of the Command Linerefactor u

Type the following : $ rm -r test01

$ rm -r (remove recursively)So when you typed $ rm test01, the system likely reported back the following message: rm: test01: is a directory $ rm on its own can remove files but not directories. $ rm needs the -r flag in order to remove a directory. Flags are options which when passed with the command, modify a command’s action. In the case of our rm command, the -r flag stands for recursive, a fancy way of saying “let the rm command remove not only the directory but, also all the inner contents of the directory.

What you achieved:You removed a directory using rm. Again, be careful with this command. Given what you’ve learned, how might you make sure you are in the right directory and verify the files and directories you want to remove are there before removing them?

Take Command of the Command Linerefactor u

Type the following : $ mv myFile01.txt newFile.txt

$ mv (move file)

$ mv is the command to not only move a file to another directory but also can rename a file. Renaming myFile01.txt to newFile.txt is what you achieved here. How might you verify the result?

What you achieved:

Take Command of the Command Linerefactor u

Image Optim-CLI is a tool for Mac which automates three image optimization programs: ImageOptim, ImageAlpha and JPEGmini. Keeping image file sizes small, is crucial in just about all aspects of web development from building small websites to building large applications.

Let’s install ImageOptim-CLI.

ImageOptim-CLI

Type the following: $ curl --output imageoptim-cli.zip https://codeload.github.com/JamieMason/ImageOptim-CLI/zip/1.11.6

Take Command of the Command Linerefactor u

ImageOptim-CLI

Type the following three commands:

$ unzip imageoptim-cli.zip $ mv ImageOptim-CLI-1.11.6 ~/ImageOptim-CLI-1.11.6 $ export PATH=$PATH:imageoptim-cli/bin

So you likely noticed your terminal reporting a download after you executed the $ curl.

$ curl is a command to transfer data to or from a server. In this case, you used curl to grab a .zip file and transfer it from the server to your machine. Now let’s unzip it.

Take Command of the Command Linerefactor u

ImageOptim-CLI

Type the following two commands: $ cd images $ imageoptim -j -a -q -d ./

With ImageOptim installed, we’re ready to optimize some images.

Take Command of the Command Linerefactor u

Resources

ImageOptim-CLI on Github

Now that you have taken command, what’s next? You have an excellent start but there’s plenty left to learn. Below are some resources that build on what we’ve learned today. RefactorU’s course Getting Started as a Web Developer covers the command line. Professional developer Zed Shaw has a course listed below as well. Both are excellent!

Meet ImageOptim-CLI

ImageOptim Command LineGetting Started as a Web Developer

Learn Code the Hard Way : CLI