Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,350 --> 00:00:04,410
Now before we can use a tool like parcel,
2
2
00:00:04,410 --> 00:00:08,420
we first need to learn a little bit about the Command Line.
3
3
00:00:08,420 --> 00:00:10,670
Yeah, you heard that right.
4
4
00:00:10,670 --> 00:00:12,870
All of these build tools that are available
5
5
00:00:12,870 --> 00:00:16,060
on NPM only work in the Command Line.
6
6
00:00:16,060 --> 00:00:18,380
And so now comes that time
7
7
00:00:18,380 --> 00:00:20,730
where you finally have to learn a little bit
8
8
00:00:20,730 --> 00:00:24,390
about the basics at least of the Command Line.
9
9
00:00:24,390 --> 00:00:26,760
Now, if you already know this stuff,
10
10
00:00:26,760 --> 00:00:29,990
then please move on to the next lecture right away
11
11
00:00:29,990 --> 00:00:33,360
because you will probably not learn anything new here
12
12
00:00:33,360 --> 00:00:36,273
but for the rest of us, let's get started.
13
13
00:00:37,860 --> 00:00:39,170
So in this short video,
14
14
00:00:39,170 --> 00:00:41,930
all I want to do is to give you the foundation
15
15
00:00:41,930 --> 00:00:43,490
of the Command Line.
16
16
00:00:43,490 --> 00:00:46,670
So stuff like moving around in the file system,
17
17
00:00:46,670 --> 00:00:50,230
creating files and folders, copying files
18
18
00:00:50,230 --> 00:00:52,200
and so on and so forth.
19
19
00:00:52,200 --> 00:00:55,940
Because as a web developer, it's really quite important
20
20
00:00:55,940 --> 00:00:57,870
that, you know, at least how to do
21
21
00:00:57,870 --> 00:01:02,870
these basic things using a terminal or a command prompt.
22
22
00:01:02,910 --> 00:01:06,412
Now I know that many, many people are afraid
23
23
00:01:06,412 --> 00:01:09,580
of the Command Line for some reason.
24
24
00:01:09,580 --> 00:01:12,240
And actually I'm the first to admit
25
25
00:01:12,240 --> 00:01:15,750
that I was afraid myself a long time ago
26
26
00:01:15,750 --> 00:01:18,730
and I was always trying to just avoid it,
27
27
00:01:18,730 --> 00:01:20,320
but now I look back
28
28
00:01:20,320 --> 00:01:25,320
and well, that's just silly because it's not hard at all,
29
29
00:01:25,550 --> 00:01:28,620
and now I can't live without the Command Line,
30
30
00:01:28,620 --> 00:01:31,930
and in fact, no serious web developer can live
31
31
00:01:31,930 --> 00:01:33,760
without the command line either.
32
32
00:01:33,760 --> 00:01:37,160
It's just part of the job, all right?
33
33
00:01:37,160 --> 00:01:40,900
But enough talk, let's now actually do something
34
34
00:01:40,900 --> 00:01:43,690
and we can go about this in different ways.
35
35
00:01:43,690 --> 00:01:45,750
So we can use a separate window.
36
36
00:01:45,750 --> 00:01:48,253
So on the Mac, I'm gonna open up Terminal,
37
37
00:01:50,240 --> 00:01:52,860
All right, now, if you're on windows,
38
38
00:01:52,860 --> 00:01:55,490
you can just right click on the Start button,
39
39
00:01:55,490 --> 00:01:58,270
and from there select the command prompt.
40
40
00:01:58,270 --> 00:02:01,340
So that's how the terminal is called on Windows.
41
41
00:02:01,340 --> 00:02:04,880
And if you're using Linux, well, then, I'm pretty sure
42
42
00:02:04,880 --> 00:02:07,770
that you already know how to use the terminal
43
43
00:02:07,770 --> 00:02:10,230
and how to do all of this stuff.
44
44
00:02:10,230 --> 00:02:14,100
But anyways, this is only one of the ways of doing it,
45
45
00:02:14,100 --> 00:02:16,270
and many times as a web developer,
46
46
00:02:16,270 --> 00:02:18,300
you will use a separate Window
47
47
00:02:18,300 --> 00:02:21,970
like this one, but since we're using VS Code already
48
48
00:02:21,970 --> 00:02:25,250
and VS Code does have an integrated terminal,
49
49
00:02:25,250 --> 00:02:26,793
we can simply use that.
50
50
00:02:27,770 --> 00:02:32,483
So I will close that now and open up the terminal like this.
51
51
00:02:33,560 --> 00:02:35,183
And so here we go.
52
52
00:02:36,290 --> 00:02:39,680
Now here we see that we already have one terminal running,
53
53
00:02:39,680 --> 00:02:43,610
and so that's the one that is looking for changes here.
54
54
00:02:43,610 --> 00:02:45,830
So it's that note process,
55
55
00:02:45,830 --> 00:02:50,830
so that life server tool that we have been using, okay?
56
56
00:02:51,380 --> 00:02:55,430
Now on windows, it's not going to say bash here probably,
57
57
00:02:55,430 --> 00:02:57,270
and that's because the command line works
58
58
00:02:57,270 --> 00:02:59,860
a little bit different on windows than it does
59
59
00:02:59,860 --> 00:03:04,310
on Unix based systems like the Mac or Linux.
60
60
00:03:04,310 --> 00:03:06,910
But anyway, most commands are the same
61
61
00:03:06,910 --> 00:03:11,520
and whenever one is different, I will let you know, okay?
62
62
00:03:11,520 --> 00:03:13,380
Now the first thing that you need to know
63
63
00:03:13,380 --> 00:03:17,870
about any Command Line is that you are always in a folder.
64
64
00:03:17,870 --> 00:03:20,420
So right now we are in this project folder,
65
65
00:03:20,420 --> 00:03:23,080
and so that's the beauty of VS Code.
66
66
00:03:23,080 --> 00:03:24,940
So whenever we open a terminal
67
67
00:03:24,940 --> 00:03:29,940
in VS Code, we are always in this project folder itself,
68
68
00:03:30,340 --> 00:03:31,660
and then from this location
69
69
00:03:31,660 --> 00:03:35,810
in the file system, we can move up and down using commands.
70
70
00:03:35,810 --> 00:03:37,760
Now, the first command that I'm going to show you
71
71
00:03:37,760 --> 00:03:41,217
is LS which on Windows is called DIR,
72
72
00:03:42,080 --> 00:03:44,000
which stands for Directory.
73
73
00:03:44,000 --> 00:03:45,350
So on Windows type DIR
74
74
00:03:46,210 --> 00:03:49,580
and on a Unix based system, LS,
75
75
00:03:49,580 --> 00:03:51,710
and so this will then show you the contents
76
76
00:03:51,710 --> 00:03:54,060
of the current folder, all right?
77
77
00:03:54,060 --> 00:03:56,480
And so indeed, that's exactly the files
78
78
00:03:56,480 --> 00:03:59,210
that we have here except for this one here,
79
79
00:03:59,210 --> 00:04:01,470
which starts with a dot,
80
80
00:04:01,470 --> 00:04:04,113
and so that's different but nevermind.
81
81
00:04:04,960 --> 00:04:06,650
Then the next command is CD
82
82
00:04:06,650 --> 00:04:09,230
which stands for Change Directory,
83
83
00:04:09,230 --> 00:04:12,370
and with this, we can go up and down the file tree.
84
84
00:04:12,370 --> 00:04:16,167
For now, let's just go up, and for that, we use dot dot.
85
85
00:04:17,040 --> 00:04:20,320
And so with this, we are now in the desktop.
86
86
00:04:20,320 --> 00:04:22,500
So let's take a look here as well,
87
87
00:04:22,500 --> 00:04:24,780
and so here we see all of the folders
88
88
00:04:24,780 --> 00:04:27,850
that we created before, okay?
89
89
00:04:27,850 --> 00:04:30,870
And so let's now move into one of them,
90
90
00:04:30,870 --> 00:04:34,380
so I can write again CD, and then let's say,
91
91
00:04:34,380 --> 00:04:37,170
I want to move into folder 13.
92
92
00:04:37,170 --> 00:04:39,760
So 13-advanced,
93
93
00:04:39,760 --> 00:04:42,690
but I actually don't have to type all of it.
94
94
00:04:42,690 --> 00:04:46,290
So instead I can just hit the tab key
95
95
00:04:46,290 --> 00:04:49,730
and it will then auto complete this path for me.
96
96
00:04:49,730 --> 00:04:52,140
So that's very handy whenever we don't want
97
97
00:04:52,140 --> 00:04:54,240
to write everything by hand.
98
98
00:04:54,240 --> 00:04:59,240
So hit Enter one more time, then LS or DIR on windows,
99
99
00:05:00,240 --> 00:05:03,000
and so with this, we can check out all the files
100
100
00:05:03,000 --> 00:05:04,832
that are in there.
101
101
00:05:04,832 --> 00:05:08,470
So again, three files, and then we also have a folder.
102
102
00:05:08,470 --> 00:05:10,940
So let's go there as well.
103
103
00:05:10,940 --> 00:05:15,940
So CD IMG, and again, let's check out what we have in there.
104
104
00:05:17,400 --> 00:05:20,740
So all of these images, all right?
105
105
00:05:20,740 --> 00:05:22,640
So let's move up.
106
106
00:05:22,640 --> 00:05:24,500
So that's dot dot again.
107
107
00:05:24,500 --> 00:05:27,260
And actually we want to move up two levels.
108
108
00:05:27,260 --> 00:05:32,260
And so here we can then add a slash and then again, dot dot.
109
109
00:05:32,330 --> 00:05:36,340
And so this will move up two levels back to the desktop.
110
110
00:05:36,340 --> 00:05:40,690
So here you see that we are at the desktop, okay?
111
111
00:05:40,690 --> 00:05:44,023
Then we can also clear the console like this,
112
112
00:05:45,240 --> 00:05:47,343
and so then everything disappears.
113
113
00:05:49,211 --> 00:05:52,924
Okay, let's take a look again and as remember one more time,
114
114
00:05:52,924 --> 00:05:54,103
it is DIR on Windows.
115
115
00:05:55,000 --> 00:05:58,350
And so now let's actually go back to our project folder.
116
116
00:05:58,350 --> 00:06:01,170
And again, now I can already auto complete
117
117
00:06:01,170 --> 00:06:04,990
because this part of the string is already unique.
118
118
00:06:04,990 --> 00:06:08,490
So I hit Tab, Enter, and then we are back
119
119
00:06:08,490 --> 00:06:10,700
in our project folder.
120
120
00:06:10,700 --> 00:06:14,090
So to clear this, I can again write clear,
121
121
00:06:14,090 --> 00:06:16,903
but in VS Code, I can also hit Command key,
122
122
00:06:18,050 --> 00:06:19,280
like this.
123
123
00:06:19,280 --> 00:06:21,600
Well, at least it works on Mac.
124
124
00:06:21,600 --> 00:06:23,750
I'm not sure about Windows.
125
125
00:06:23,750 --> 00:06:28,260
So you can also type clear like this.
126
126
00:06:28,260 --> 00:06:31,860
And so now let's actually here create a folder,
127
127
00:06:31,860 --> 00:06:36,860
so that's MKDIR and then let's simply call this Test.
128
128
00:06:37,570 --> 00:06:39,690
And so if we check this out now,
129
129
00:06:39,690 --> 00:06:42,600
then here we have a new folder and you can see
130
130
00:06:42,600 --> 00:06:44,380
that here as well,
131
131
00:06:44,380 --> 00:06:47,510
and of course, I could also see it here
132
132
00:06:47,510 --> 00:06:48,623
in the file system,
133
133
00:06:50,130 --> 00:06:50,963
right?
134
134
00:06:50,963 --> 00:06:51,796
So there it is.
135
135
00:06:55,480 --> 00:06:58,680
And now back to VS Code actually
136
136
00:06:59,580 --> 00:07:01,223
and let's move there now,
137
137
00:07:03,140 --> 00:07:04,620
clear it again.
138
138
00:07:04,620 --> 00:07:07,740
And now here let's just create some files.
139
139
00:07:07,740 --> 00:07:10,600
So for that, I'm using Touch on the Mac
140
140
00:07:10,600 --> 00:07:14,023
and on windows, it is Edit like this.
141
141
00:07:15,430 --> 00:07:19,300
So let's say touch and then index.html,
142
142
00:07:19,300 --> 00:07:23,940
and then let's also say script.js.
143
143
00:07:23,940 --> 00:07:26,420
Now these are empty files now
144
144
00:07:26,420 --> 00:07:28,760
but we can still check them out here,
145
145
00:07:28,760 --> 00:07:33,210
and we could actually also call or live server here now.
146
146
00:07:33,210 --> 00:07:37,460
So we can say live server and as always I can auto complete,
147
147
00:07:37,460 --> 00:07:42,460
hit Enter and then it will open up in your browser tab,
148
148
00:07:43,270 --> 00:07:45,050
and in this case, it didn't
149
149
00:07:45,050 --> 00:07:47,290
because I'm using another browser.
150
150
00:07:47,290 --> 00:07:50,680
So let me finish this by writing Ctrl+C,
151
151
00:07:50,680 --> 00:07:54,270
then clicking here and doing it again.
152
152
00:07:54,270 --> 00:07:57,140
And so I opened up this command again
153
153
00:07:57,140 --> 00:07:59,833
by clicking the up arrow, okay?
154
154
00:08:01,040 --> 00:08:04,450
And so now here it is, but let's cancel it again
155
155
00:08:04,450 --> 00:08:06,230
because we're not really interested
156
156
00:08:06,230 --> 00:08:08,820
in seeing this empty page.
157
157
00:08:08,820 --> 00:08:11,060
And so again, that is Ctrl+ C,
158
158
00:08:11,060 --> 00:08:12,300
even on the Mac,
159
159
00:08:12,300 --> 00:08:13,553
so not command C.
160
160
00:08:14,790 --> 00:08:17,720
And here I can actually use the arrow key
161
161
00:08:17,720 --> 00:08:21,830
as many times as I want to see my past commands,
162
162
00:08:21,830 --> 00:08:25,100
and I can also go back down like this.
163
163
00:08:25,100 --> 00:08:28,100
So let's take a look again at the files we have
164
164
00:08:28,100 --> 00:08:31,430
and we could also add multiple files all at once.
165
165
00:08:31,430 --> 00:08:33,790
And this is actually something pretty useful,
166
166
00:08:33,790 --> 00:08:36,830
and that I do all the time when I need to create
167
167
00:08:36,830 --> 00:08:39,690
like multiple modules at once.
168
168
00:08:39,690 --> 00:08:41,033
So let's say Jonas.js.
169
169
00:08:43,883 --> 00:08:45,923
let's say bankers.JS,
170
170
00:08:46,770 --> 00:08:48,963
and mapt.js.
171
171
00:08:49,960 --> 00:08:54,040
And so now it created these three files all at once.
172
172
00:08:54,040 --> 00:08:57,000
I'm not sure why I wrote JS there
173
173
00:08:57,000 --> 00:09:00,370
but nevermind, of course, JS does not exist
174
174
00:09:00,370 --> 00:09:02,290
but here we now have all these files
175
175
00:09:02,290 --> 00:09:04,384
that we created previously,
176
176
00:09:04,384 --> 00:09:05,323
okay?
177
177
00:09:06,200 --> 00:09:08,150
So we have all these files now
178
178
00:09:08,150 --> 00:09:10,360
but we're not really interested in them,
179
179
00:09:10,360 --> 00:09:12,480
and so let's delete them,
180
180
00:09:12,480 --> 00:09:17,480
and for that, we can use RM on the Mac and DEL on Windows.
181
181
00:09:20,120 --> 00:09:24,903
So script JS for example, and let's say also jonas.js.
182
182
00:09:26,420 --> 00:09:27,870
Let's take a look.
183
183
00:09:27,870 --> 00:09:30,530
And now we only have these three left
184
184
00:09:30,530 --> 00:09:33,240
and let's say that we actually wanted to move one
185
185
00:09:33,240 --> 00:09:35,460
of them to the parent folder.
186
186
00:09:35,460 --> 00:09:38,100
So for that, we can use MV,
187
187
00:09:38,100 --> 00:09:39,560
let's say we want Map T
188
188
00:09:40,420 --> 00:09:42,650
and once again, I hit Tab,
189
189
00:09:42,650 --> 00:09:45,580
and so we need to specify first the name
190
190
00:09:45,580 --> 00:09:47,290
of the file that should be moved,
191
191
00:09:47,290 --> 00:09:51,380
and then the location into which that file should be moved.
192
192
00:09:51,380 --> 00:09:54,150
So what is that location?
193
193
00:09:54,150 --> 00:09:58,010
Well, in this case, we want to move it to the parent folder.
194
194
00:09:58,010 --> 00:10:02,893
And so that is dot dot like this, and then the dash,
195
195
00:10:04,360 --> 00:10:05,400
okay?
196
196
00:10:05,400 --> 00:10:09,163
And you actually already saw it appear here, right?
197
197
00:10:11,320 --> 00:10:14,850
And if we take a look here again, then there it is.
198
198
00:10:14,850 --> 00:10:17,010
If we move to that parent folder
199
199
00:10:17,010 --> 00:10:21,303
and check it out here as well, then there is mapt.js.
200
200
00:10:23,720 --> 00:10:24,780
All right?
201
201
00:10:24,780 --> 00:10:28,520
And so now we really don't need that test folder anymore.
202
202
00:10:28,520 --> 00:10:30,710
So let's delete that as well,
203
203
00:10:30,710 --> 00:10:32,583
and for that, we can use RMDIR.
204
204
00:10:34,180 --> 00:10:36,670
So this stands for Remove Directory
205
205
00:10:36,670 --> 00:10:39,973
while the opposite of that remember was MKDAR.
206
206
00:10:41,040 --> 00:10:42,833
So Make a Directory.
207
207
00:10:43,950 --> 00:10:45,890
And so now we just need to specify
208
208
00:10:45,890 --> 00:10:50,660
that test and the directory is not empty.
209
209
00:10:50,660 --> 00:10:54,630
So RMDIR only works for empty directories,
210
210
00:10:54,630 --> 00:10:56,790
at least on the Mac.
211
211
00:10:56,790 --> 00:10:59,480
On windows, I'm not sure how it works,
212
212
00:10:59,480 --> 00:11:04,280
but apparently on the Mac only four empty directories.
213
213
00:11:04,280 --> 00:11:06,300
However, at least on a Mac,
214
214
00:11:06,300 --> 00:11:09,770
we can use another trick to remove a directory.
215
215
00:11:09,770 --> 00:11:13,010
So we can use again RM which we also used
216
216
00:11:13,010 --> 00:11:17,010
to remove files and then we can specify a Fleck.
217
217
00:11:17,010 --> 00:11:19,440
So that's basically an option, which we write
218
218
00:11:19,440 --> 00:11:22,950
with a dash and then a specific symbol or a letter.
219
219
00:11:22,950 --> 00:11:25,967
So in this case, that's R which stands
220
220
00:11:25,967 --> 00:11:29,910
for Recursive and then the name of the directory,
221
221
00:11:29,910 --> 00:11:33,540
and so now it recursively basically deleted all
222
222
00:11:33,540 --> 00:11:35,440
the files that are in here
223
223
00:11:35,440 --> 00:11:37,583
and then also the directory itself.
224
224
00:11:39,590 --> 00:11:44,590
And so as you see that folder is now gone, all right?
225
225
00:11:44,890 --> 00:11:48,213
And again, on Windows, I'm not really sure about this one,
226
226
00:11:49,060 --> 00:11:52,410
maybe RMDIR just worked,
227
227
00:11:52,410 --> 00:11:55,620
but if not, well, if you really need it,
228
228
00:11:55,620 --> 00:11:57,200
then of course you can always go ahead
229
229
00:11:57,200 --> 00:12:00,610
and Google how it works on Windows as well.
230
230
00:12:00,610 --> 00:12:03,270
But with this, I think we actually covered everything
231
231
00:12:03,270 --> 00:12:04,430
that we needed.
232
232
00:12:04,430 --> 00:12:08,393
Let's just get rid of that mapt.js.
233
233
00:12:09,570 --> 00:12:12,850
So mapt.js, and again on Windows,
234
234
00:12:12,850 --> 00:12:17,083
that would be DEL for delete, okay?
235
235
00:12:18,530 --> 00:12:20,300
And so with this, we are back
236
236
00:12:20,300 --> 00:12:22,680
to our initial working directory
237
237
00:12:22,680 --> 00:12:24,963
and can now keep going into section.
20498
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.