WEBVTT 1 00:00:01.350 --> 00:00:04.410 Now before we can use a tool like parcel, 2 00:00:04.410 --> 00:00:08.420 we first need to learn a little bit about the Command Line. 3 00:00:08.420 --> 00:00:10.670 Yeah, you heard that right. 4 00:00:10.670 --> 00:00:12.870 All of these build tools that are available 5 00:00:12.870 --> 00:00:16.060 on NPM only work in the Command Line. 6 00:00:16.060 --> 00:00:18.380 And so now comes that time 7 00:00:18.380 --> 00:00:20.730 where you finally have to learn a little bit 8 00:00:20.730 --> 00:00:24.390 about the basics at least of the Command Line. 9 00:00:24.390 --> 00:00:26.760 Now, if you already know this stuff, 10 00:00:26.760 --> 00:00:29.990 then please move on to the next lecture right away 11 00:00:29.990 --> 00:00:33.360 because you will probably not learn anything new here 12 00:00:33.360 --> 00:00:36.273 but for the rest of us, let's get started. 13 00:00:37.860 --> 00:00:39.170 So in this short video, 14 00:00:39.170 --> 00:00:41.930 all I want to do is to give you the foundation 15 00:00:41.930 --> 00:00:43.490 of the Command Line. 16 00:00:43.490 --> 00:00:46.670 So stuff like moving around in the file system, 17 00:00:46.670 --> 00:00:50.230 creating files and folders, copying files 18 00:00:50.230 --> 00:00:52.200 and so on and so forth. 19 00:00:52.200 --> 00:00:55.940 Because as a web developer, it's really quite important 20 00:00:55.940 --> 00:00:57.870 that, you know, at least how to do 21 00:00:57.870 --> 00:01:02.870 these basic things using a terminal or a command prompt. 22 00:01:02.910 --> 00:01:06.412 Now I know that many, many people are afraid 23 00:01:06.412 --> 00:01:09.580 of the Command Line for some reason. 24 00:01:09.580 --> 00:01:12.240 And actually I'm the first to admit 25 00:01:12.240 --> 00:01:15.750 that I was afraid myself a long time ago 26 00:01:15.750 --> 00:01:18.730 and I was always trying to just avoid it, 27 00:01:18.730 --> 00:01:20.320 but now I look back 28 00:01:20.320 --> 00:01:25.320 and well, that's just silly because it's not hard at all, 29 00:01:25.550 --> 00:01:28.620 and now I can't live without the Command Line, 30 00:01:28.620 --> 00:01:31.930 and in fact, no serious web developer can live 31 00:01:31.930 --> 00:01:33.760 without the command line either. 32 00:01:33.760 --> 00:01:37.160 It's just part of the job, all right? 33 00:01:37.160 --> 00:01:40.900 But enough talk, let's now actually do something 34 00:01:40.900 --> 00:01:43.690 and we can go about this in different ways. 35 00:01:43.690 --> 00:01:45.750 So we can use a separate window. 36 00:01:45.750 --> 00:01:48.253 So on the Mac, I'm gonna open up Terminal, 37 00:01:50.240 --> 00:01:52.860 All right, now, if you're on windows, 38 00:01:52.860 --> 00:01:55.490 you can just right click on the Start button, 39 00:01:55.490 --> 00:01:58.270 and from there select the command prompt. 40 00:01:58.270 --> 00:02:01.340 So that's how the terminal is called on Windows. 41 00:02:01.340 --> 00:02:04.880 And if you're using Linux, well, then, I'm pretty sure 42 00:02:04.880 --> 00:02:07.770 that you already know how to use the terminal 43 00:02:07.770 --> 00:02:10.230 and how to do all of this stuff. 44 00:02:10.230 --> 00:02:14.100 But anyways, this is only one of the ways of doing it, 45 00:02:14.100 --> 00:02:16.270 and many times as a web developer, 46 00:02:16.270 --> 00:02:18.300 you will use a separate Window 47 00:02:18.300 --> 00:02:21.970 like this one, but since we're using VS Code already 48 00:02:21.970 --> 00:02:25.250 and VS Code does have an integrated terminal, 49 00:02:25.250 --> 00:02:26.793 we can simply use that. 50 00:02:27.770 --> 00:02:32.483 So I will close that now and open up the terminal like this. 51 00:02:33.560 --> 00:02:35.183 And so here we go. 52 00:02:36.290 --> 00:02:39.680 Now here we see that we already have one terminal running, 53 00:02:39.680 --> 00:02:43.610 and so that's the one that is looking for changes here. 54 00:02:43.610 --> 00:02:45.830 So it's that note process, 55 00:02:45.830 --> 00:02:50.830 so that life server tool that we have been using, okay? 56 00:02:51.380 --> 00:02:55.430 Now on windows, it's not going to say bash here probably, 57 00:02:55.430 --> 00:02:57.270 and that's because the command line works 58 00:02:57.270 --> 00:02:59.860 a little bit different on windows than it does 59 00:02:59.860 --> 00:03:04.310 on Unix based systems like the Mac or Linux. 60 00:03:04.310 --> 00:03:06.910 But anyway, most commands are the same 61 00:03:06.910 --> 00:03:11.520 and whenever one is different, I will let you know, okay? 62 00:03:11.520 --> 00:03:13.380 Now the first thing that you need to know 63 00:03:13.380 --> 00:03:17.870 about any Command Line is that you are always in a folder. 64 00:03:17.870 --> 00:03:20.420 So right now we are in this project folder, 65 00:03:20.420 --> 00:03:23.080 and so that's the beauty of VS Code. 66 00:03:23.080 --> 00:03:24.940 So whenever we open a terminal 67 00:03:24.940 --> 00:03:29.940 in VS Code, we are always in this project folder itself, 68 00:03:30.340 --> 00:03:31.660 and then from this location 69 00:03:31.660 --> 00:03:35.810 in the file system, we can move up and down using commands. 70 00:03:35.810 --> 00:03:37.760 Now, the first command that I'm going to show you 71 00:03:37.760 --> 00:03:41.217 is LS which on Windows is called DIR, 72 00:03:42.080 --> 00:03:44.000 which stands for Directory. 73 00:03:44.000 --> 00:03:45.350 So on Windows type DIR 74 00:03:46.210 --> 00:03:49.580 and on a Unix based system, LS, 75 00:03:49.580 --> 00:03:51.710 and so this will then show you the contents 76 00:03:51.710 --> 00:03:54.060 of the current folder, all right? 77 00:03:54.060 --> 00:03:56.480 And so indeed, that's exactly the files 78 00:03:56.480 --> 00:03:59.210 that we have here except for this one here, 79 00:03:59.210 --> 00:04:01.470 which starts with a dot, 80 00:04:01.470 --> 00:04:04.113 and so that's different but nevermind. 81 00:04:04.960 --> 00:04:06.650 Then the next command is CD 82 00:04:06.650 --> 00:04:09.230 which stands for Change Directory, 83 00:04:09.230 --> 00:04:12.370 and with this, we can go up and down the file tree. 84 00:04:12.370 --> 00:04:16.167 For now, let's just go up, and for that, we use dot dot. 85 00:04:17.040 --> 00:04:20.320 And so with this, we are now in the desktop. 86 00:04:20.320 --> 00:04:22.500 So let's take a look here as well, 87 00:04:22.500 --> 00:04:24.780 and so here we see all of the folders 88 00:04:24.780 --> 00:04:27.850 that we created before, okay? 89 00:04:27.850 --> 00:04:30.870 And so let's now move into one of them, 90 00:04:30.870 --> 00:04:34.380 so I can write again CD, and then let's say, 91 00:04:34.380 --> 00:04:37.170 I want to move into folder 13. 92 00:04:37.170 --> 00:04:39.760 So 13-advanced, 93 00:04:39.760 --> 00:04:42.690 but I actually don't have to type all of it. 94 00:04:42.690 --> 00:04:46.290 So instead I can just hit the tab key 95 00:04:46.290 --> 00:04:49.730 and it will then auto complete this path for me. 96 00:04:49.730 --> 00:04:52.140 So that's very handy whenever we don't want 97 00:04:52.140 --> 00:04:54.240 to write everything by hand. 98 00:04:54.240 --> 00:04:59.240 So hit Enter one more time, then LS or DIR on windows, 99 00:05:00.240 --> 00:05:03.000 and so with this, we can check out all the files 100 00:05:03.000 --> 00:05:04.832 that are in there. 101 00:05:04.832 --> 00:05:08.470 So again, three files, and then we also have a folder. 102 00:05:08.470 --> 00:05:10.940 So let's go there as well. 103 00:05:10.940 --> 00:05:15.940 So CD IMG, and again, let's check out what we have in there. 104 00:05:17.400 --> 00:05:20.740 So all of these images, all right? 105 00:05:20.740 --> 00:05:22.640 So let's move up. 106 00:05:22.640 --> 00:05:24.500 So that's dot dot again. 107 00:05:24.500 --> 00:05:27.260 And actually we want to move up two levels. 108 00:05:27.260 --> 00:05:32.260 And so here we can then add a slash and then again, dot dot. 109 00:05:32.330 --> 00:05:36.340 And so this will move up two levels back to the desktop. 110 00:05:36.340 --> 00:05:40.690 So here you see that we are at the desktop, okay? 111 00:05:40.690 --> 00:05:44.023 Then we can also clear the console like this, 112 00:05:45.240 --> 00:05:47.343 and so then everything disappears. 113 00:05:49.211 --> 00:05:52.924 Okay, let's take a look again and as remember one more time, 114 00:05:52.924 --> 00:05:54.103 it is DIR on Windows. 115 00:05:55.000 --> 00:05:58.350 And so now let's actually go back to our project folder. 116 00:05:58.350 --> 00:06:01.170 And again, now I can already auto complete 117 00:06:01.170 --> 00:06:04.990 because this part of the string is already unique. 118 00:06:04.990 --> 00:06:08.490 So I hit Tab, Enter, and then we are back 119 00:06:08.490 --> 00:06:10.700 in our project folder. 120 00:06:10.700 --> 00:06:14.090 So to clear this, I can again write clear, 121 00:06:14.090 --> 00:06:16.903 but in VS Code, I can also hit Command key, 122 00:06:18.050 --> 00:06:19.280 like this. 123 00:06:19.280 --> 00:06:21.600 Well, at least it works on Mac. 124 00:06:21.600 --> 00:06:23.750 I'm not sure about Windows. 125 00:06:23.750 --> 00:06:28.260 So you can also type clear like this. 126 00:06:28.260 --> 00:06:31.860 And so now let's actually here create a folder, 127 00:06:31.860 --> 00:06:36.860 so that's MKDIR and then let's simply call this Test. 128 00:06:37.570 --> 00:06:39.690 And so if we check this out now, 129 00:06:39.690 --> 00:06:42.600 then here we have a new folder and you can see 130 00:06:42.600 --> 00:06:44.380 that here as well, 131 00:06:44.380 --> 00:06:47.510 and of course, I could also see it here 132 00:06:47.510 --> 00:06:48.623 in the file system, 133 00:06:50.130 --> 00:06:50.963 right? 134 00:06:50.963 --> 00:06:51.796 So there it is. 135 00:06:55.480 --> 00:06:58.680 And now back to VS Code actually 136 00:06:59.580 --> 00:07:01.223 and let's move there now, 137 00:07:03.140 --> 00:07:04.620 clear it again. 138 00:07:04.620 --> 00:07:07.740 And now here let's just create some files. 139 00:07:07.740 --> 00:07:10.600 So for that, I'm using Touch on the Mac 140 00:07:10.600 --> 00:07:14.023 and on windows, it is Edit like this. 141 00:07:15.430 --> 00:07:19.300 So let's say touch and then index.html, 142 00:07:19.300 --> 00:07:23.940 and then let's also say script.js. 143 00:07:23.940 --> 00:07:26.420 Now these are empty files now 144 00:07:26.420 --> 00:07:28.760 but we can still check them out here, 145 00:07:28.760 --> 00:07:33.210 and we could actually also call or live server here now. 146 00:07:33.210 --> 00:07:37.460 So we can say live server and as always I can auto complete, 147 00:07:37.460 --> 00:07:42.460 hit Enter and then it will open up in your browser tab, 148 00:07:43.270 --> 00:07:45.050 and in this case, it didn't 149 00:07:45.050 --> 00:07:47.290 because I'm using another browser. 150 00:07:47.290 --> 00:07:50.680 So let me finish this by writing Ctrl+C, 151 00:07:50.680 --> 00:07:54.270 then clicking here and doing it again. 152 00:07:54.270 --> 00:07:57.140 And so I opened up this command again 153 00:07:57.140 --> 00:07:59.833 by clicking the up arrow, okay? 154 00:08:01.040 --> 00:08:04.450 And so now here it is, but let's cancel it again 155 00:08:04.450 --> 00:08:06.230 because we're not really interested 156 00:08:06.230 --> 00:08:08.820 in seeing this empty page. 157 00:08:08.820 --> 00:08:11.060 And so again, that is Ctrl+ C, 158 00:08:11.060 --> 00:08:12.300 even on the Mac, 159 00:08:12.300 --> 00:08:13.553 so not command C. 160 00:08:14.790 --> 00:08:17.720 And here I can actually use the arrow key 161 00:08:17.720 --> 00:08:21.830 as many times as I want to see my past commands, 162 00:08:21.830 --> 00:08:25.100 and I can also go back down like this. 163 00:08:25.100 --> 00:08:28.100 So let's take a look again at the files we have 164 00:08:28.100 --> 00:08:31.430 and we could also add multiple files all at once. 165 00:08:31.430 --> 00:08:33.790 And this is actually something pretty useful, 166 00:08:33.790 --> 00:08:36.830 and that I do all the time when I need to create 167 00:08:36.830 --> 00:08:39.690 like multiple modules at once. 168 00:08:39.690 --> 00:08:41.033 So let's say Jonas.js. 169 00:08:43.883 --> 00:08:45.923 let's say bankers.JS, 170 00:08:46.770 --> 00:08:48.963 and mapt.js. 171 00:08:49.960 --> 00:08:54.040 And so now it created these three files all at once. 172 00:08:54.040 --> 00:08:57.000 I'm not sure why I wrote JS there 173 00:08:57.000 --> 00:09:00.370 but nevermind, of course, JS does not exist 174 00:09:00.370 --> 00:09:02.290 but here we now have all these files 175 00:09:02.290 --> 00:09:04.384 that we created previously, 176 00:09:04.384 --> 00:09:05.323 okay? 177 00:09:06.200 --> 00:09:08.150 So we have all these files now 178 00:09:08.150 --> 00:09:10.360 but we're not really interested in them, 179 00:09:10.360 --> 00:09:12.480 and so let's delete them, 180 00:09:12.480 --> 00:09:17.480 and for that, we can use RM on the Mac and DEL on Windows. 181 00:09:20.120 --> 00:09:24.903 So script JS for example, and let's say also jonas.js. 182 00:09:26.420 --> 00:09:27.870 Let's take a look. 183 00:09:27.870 --> 00:09:30.530 And now we only have these three left 184 00:09:30.530 --> 00:09:33.240 and let's say that we actually wanted to move one 185 00:09:33.240 --> 00:09:35.460 of them to the parent folder. 186 00:09:35.460 --> 00:09:38.100 So for that, we can use MV, 187 00:09:38.100 --> 00:09:39.560 let's say we want Map T 188 00:09:40.420 --> 00:09:42.650 and once again, I hit Tab, 189 00:09:42.650 --> 00:09:45.580 and so we need to specify first the name 190 00:09:45.580 --> 00:09:47.290 of the file that should be moved, 191 00:09:47.290 --> 00:09:51.380 and then the location into which that file should be moved. 192 00:09:51.380 --> 00:09:54.150 So what is that location? 193 00:09:54.150 --> 00:09:58.010 Well, in this case, we want to move it to the parent folder. 194 00:09:58.010 --> 00:10:02.893 And so that is dot dot like this, and then the dash, 195 00:10:04.360 --> 00:10:05.400 okay? 196 00:10:05.400 --> 00:10:09.163 And you actually already saw it appear here, right? 197 00:10:11.320 --> 00:10:14.850 And if we take a look here again, then there it is. 198 00:10:14.850 --> 00:10:17.010 If we move to that parent folder 199 00:10:17.010 --> 00:10:21.303 and check it out here as well, then there is mapt.js. 200 00:10:23.720 --> 00:10:24.780 All right? 201 00:10:24.780 --> 00:10:28.520 And so now we really don't need that test folder anymore. 202 00:10:28.520 --> 00:10:30.710 So let's delete that as well, 203 00:10:30.710 --> 00:10:32.583 and for that, we can use RMDIR. 204 00:10:34.180 --> 00:10:36.670 So this stands for Remove Directory 205 00:10:36.670 --> 00:10:39.973 while the opposite of that remember was MKDAR. 206 00:10:41.040 --> 00:10:42.833 So Make a Directory. 207 00:10:43.950 --> 00:10:45.890 And so now we just need to specify 208 00:10:45.890 --> 00:10:50.660 that test and the directory is not empty. 209 00:10:50.660 --> 00:10:54.630 So RMDIR only works for empty directories, 210 00:10:54.630 --> 00:10:56.790 at least on the Mac. 211 00:10:56.790 --> 00:10:59.480 On windows, I'm not sure how it works, 212 00:10:59.480 --> 00:11:04.280 but apparently on the Mac only four empty directories. 213 00:11:04.280 --> 00:11:06.300 However, at least on a Mac, 214 00:11:06.300 --> 00:11:09.770 we can use another trick to remove a directory. 215 00:11:09.770 --> 00:11:13.010 So we can use again RM which we also used 216 00:11:13.010 --> 00:11:17.010 to remove files and then we can specify a Fleck. 217 00:11:17.010 --> 00:11:19.440 So that's basically an option, which we write 218 00:11:19.440 --> 00:11:22.950 with a dash and then a specific symbol or a letter. 219 00:11:22.950 --> 00:11:25.967 So in this case, that's R which stands 220 00:11:25.967 --> 00:11:29.910 for Recursive and then the name of the directory, 221 00:11:29.910 --> 00:11:33.540 and so now it recursively basically deleted all 222 00:11:33.540 --> 00:11:35.440 the files that are in here 223 00:11:35.440 --> 00:11:37.583 and then also the directory itself. 224 00:11:39.590 --> 00:11:44.590 And so as you see that folder is now gone, all right? 225 00:11:44.890 --> 00:11:48.213 And again, on Windows, I'm not really sure about this one, 226 00:11:49.060 --> 00:11:52.410 maybe RMDIR just worked, 227 00:11:52.410 --> 00:11:55.620 but if not, well, if you really need it, 228 00:11:55.620 --> 00:11:57.200 then of course you can always go ahead 229 00:11:57.200 --> 00:12:00.610 and Google how it works on Windows as well. 230 00:12:00.610 --> 00:12:03.270 But with this, I think we actually covered everything 231 00:12:03.270 --> 00:12:04.430 that we needed. 232 00:12:04.430 --> 00:12:08.393 Let's just get rid of that mapt.js. 233 00:12:09.570 --> 00:12:12.850 So mapt.js, and again on Windows, 234 00:12:12.850 --> 00:12:17.083 that would be DEL for delete, okay? 235 00:12:18.530 --> 00:12:20.300 And so with this, we are back 236 00:12:20.300 --> 00:12:22.680 to our initial working directory 237 00:12:22.680 --> 00:12:24.963 and can now keep going into section.