Now before we can use a tool like parcel,
we first need to learn a little bit about the Command Line.
Yeah, you heard that right.
All of these build tools that are available
on NPM only work in the Command Line.
And so now comes that time
where you finally have to learn a little bit
about the basics at least of the Command Line.
Now, if you already know this stuff,
then please move on to the next lecture right away
because you will probably not learn anything new here
but for the rest of us, let's get started.
So in this short video,
all I want to do is to give you the foundation
of the Command Line.
So stuff like moving around in the file system,
creating files and folders, copying files
and so on and so forth.
Because as a web developer, it's really quite important
that, you know, at least how to do
these basic things using a terminal or a command prompt.
Now I know that many, many people are afraid
of the Command Line for some reason.
And actually I'm the first to admit
that I was afraid myself a long time ago
and I was always trying to just avoid it,
but now I look back
and well, that's just silly because it's not hard at all,
and now I can't live without the Command Line,
and in fact, no serious web developer can live
without the command line either.
It's just part of the job, all right?
But enough talk, let's now actually do something
and we can go about this in different ways.
So we can use a separate window.
So on the Mac, I'm gonna open up Terminal,
All right, now, if you're on windows,
you can just right click on the Start button,
and from there select the command prompt.
So that's how the terminal is called on Windows.
And if you're using Linux, well, then, I'm pretty sure
that you already know how to use the terminal
and how to do all of this stuff.
But anyways, this is only one of the ways of doing it,
and many times as a web developer,
you will use a separate Window
like this one, but since we're using VS Code already
and VS Code does have an integrated terminal,
we can simply use that.
So I will close that now and open up the terminal like this.
And so here we go.
Now here we see that we already have one terminal running,
and so that's the one that is looking for changes here.
So it's that note process,
so that life server tool that we have been using, okay?
Now on windows, it's not going to say bash here probably,
and that's because the command line works
a little bit different on windows than it does
on Unix based systems like the Mac or Linux.
But anyway, most commands are the same
and whenever one is different, I will let you know, okay?
Now the first thing that you need to know
about any Command Line is that you are always in a folder.
So right now we are in this project folder,
and so that's the beauty of VS Code.
So whenever we open a terminal
in VS Code, we are always in this project folder itself,
and then from this location
in the file system, we can move up and down using commands.
Now, the first command that I'm going to show you
is LS which on Windows is called DIR,
which stands for Directory.
So on Windows type DIR
and on a Unix based system, LS,
and so this will then show you the contents
of the current folder, all right?
And so indeed, that's exactly the files
that we have here except for this one here,
which starts with a dot,
and so that's different but nevermind.
Then the next command is CD
which stands for Change Directory,
and with this, we can go up and down the file tree.
For now, let's just go up, and for that, we use dot dot.
And so with this, we are now in the desktop.
So let's take a look here as well,
and so here we see all of the folders
that we created before, okay?
And so let's now move into one of them,
so I can write again CD, and then let's say,
I want to move into folder 13.
So 13-advanced,
but I actually don't have to type all of it.
So instead I can just hit the tab key
and it will then auto complete this path for me.
So that's very handy whenever we don't want
to write everything by hand.
So hit Enter one more time, then LS or DIR on windows,
and so with this, we can check out all the files
that are in there.
So again, three files, and then we also have a folder.
So let's go there as well.
So CD IMG, and again, let's check out what we have in there.
So all of these images, all right?
So let's move up.
So that's dot dot again.
And actually we want to move up two levels.
And so here we can then add a slash and then again, dot dot.
And so this will move up two levels back to the desktop.
So here you see that we are at the desktop, okay?
Then we can also clear the console like this,
and so then everything disappears.
Okay, let's take a look again and as remember one more time,
it is DIR on Windows.
And so now let's actually go back to our project folder.
And again, now I can already auto complete
because this part of the string is already unique.
So I hit Tab, Enter, and then we are back
in our project folder.
So to clear this, I can again write clear,
but in VS Code, I can also hit Command key,
like this.
Well, at least it works on Mac.
I'm not sure about Windows.
So you can also type clear like this.
And so now let's actually here create a folder,
so that's MKDIR and then let's simply call this Test.
And so if we check this out now,
then here we have a new folder and you can see
that here as well,
and of course, I could also see it here
in the file system,
right?
So there it is.
And now back to VS Code actually
and let's move there now,
clear it again.
And now here let's just create some files.
So for that, I'm using Touch on the Mac
and on windows, it is Edit like this.
So let's say touch and then index.html,
and then let's also say script.js.
Now these are empty files now
but we can still check them out here,
and we could actually also call or live server here now.
So we can say live server and as always I can auto complete,
hit Enter and then it will open up in your browser tab,
and in this case, it didn't
because I'm using another browser.
So let me finish this by writing Ctrl+C,
then clicking here and doing it again.
And so I opened up this command again
by clicking the up arrow, okay?
And so now here it is, but let's cancel it again
because we're not really interested
in seeing this empty page.
And so again, that is Ctrl+ C,
even on the Mac,
so not command C.
And here I can actually use the arrow key
as many times as I want to see my past commands,
and I can also go back down like this.
So let's take a look again at the files we have
and we could also add multiple files all at once.
And this is actually something pretty useful,
and that I do all the time when I need to create
like multiple modules at once.
So let's say Jonas.js.
let's say bankers.JS,
and mapt.js.
And so now it created these three files all at once.
I'm not sure why I wrote JS there
but nevermind, of course, JS does not exist
but here we now have all these files
that we created previously,
okay?
So we have all these files now
but we're not really interested in them,
and so let's delete them,
and for that, we can use RM on the Mac and DEL on Windows.
So script JS for example, and let's say also jonas.js.
Let's take a look.
And now we only have these three left
and let's say that we actually wanted to move one
of them to the parent folder.
So for that, we can use MV,
let's say we want Map T
and once again, I hit Tab,
and so we need to specify first the name
of the file that should be moved,
and then the location into which that file should be moved.
So what is that location?
Well, in this case, we want to move it to the parent folder.
And so that is dot dot like this, and then the dash,
okay?
And you actually already saw it appear here, right?
And if we take a look here again, then there it is.
If we move to that parent folder
and check it out here as well, then there is mapt.js.
All right?
And so now we really don't need that test folder anymore.
So let's delete that as well,
and for that, we can use RMDIR.
So this stands for Remove Directory
while the opposite of that remember was MKDAR.
So Make a Directory.
And so now we just need to specify
that test and the directory is not empty.
So RMDIR only works for empty directories,
at least on the Mac.
On windows, I'm not sure how it works,
but apparently on the Mac only four empty directories.
However, at least on a Mac,
we can use another trick to remove a directory.
So we can use again RM which we also used
to remove files and then we can specify a Fleck.
So that's basically an option, which we write
with a dash and then a specific symbol or a letter.
So in this case, that's R which stands
for Recursive and then the name of the directory,
and so now it recursively basically deleted all
the files that are in here
and then also the directory itself.
And so as you see that folder is now gone, all right?
And again, on Windows, I'm not really sure about this one,
maybe RMDIR just worked,
but if not, well, if you really need it,
then of course you can always go ahead
and Google how it works on Windows as well.
But with this, I think we actually covered everything
that we needed.
Let's just get rid of that mapt.js.
So mapt.js, and again on Windows,
that would be DEL for delete, okay?
And so with this, we are back
to our initial working directory
and can now keep going into section.