Original subtitles

1 1

Now before we can use a tool like parcel, 2

2

we first need to learn a little bit about the Command Line. 3

3

Yeah, you heard that right. 4

4

All of these build tools that are available 5

5

on NPM only work in the Command Line. 6

6

And so now comes that time 7

7

where you finally have to learn a little bit 8

8

about the basics at least of the Command Line. 9

9

Now, if you already know this stuff, 10

10

then please move on to the next lecture right away 11

11

because you will probably not learn anything new here 12

12

but for the rest of us, let's get started. 13

13

So in this short video, 14

14

all I want to do is to give you the foundation 15

15

of the Command Line. 16

16

So stuff like moving around in the file system, 17

17

creating files and folders, copying files 18

18

and so on and so forth. 19

19

Because as a web developer, it's really quite important 20

20

that, you know, at least how to do 21

21

these basic things using a terminal or a command prompt. 22

22

Now I know that many, many people are afraid 23

23

of the Command Line for some reason. 24

24

And actually I'm the first to admit 25

25

that I was afraid myself a long time ago 26

26

and I was always trying to just avoid it, 27

27

but now I look back 28

28

and well, that's just silly because it's not hard at all, 29

29

and now I can't live without the Command Line, 30

30

and in fact, no serious web developer can live 31

31

without the command line either. 32

32

It's just part of the job, all right? 33

33

But enough talk, let's now actually do something 34

34

and we can go about this in different ways. 35

35

So we can use a separate window. 36

36

So on the Mac, I'm gonna open up Terminal, 37

37

All right, now, if you're on windows, 38

38

you can just right click on the Start button, 39

39

and from there select the command prompt. 40

40

So that's how the terminal is called on Windows. 41

41

And if you're using Linux, well, then, I'm pretty sure 42

42

that you already know how to use the terminal 43

43

and how to do all of this stuff. 44

44

But anyways, this is only one of the ways of doing it, 45

45

and many times as a web developer, 46

46

you will use a separate Window 47

47

like this one, but since we're using VS Code already 48

48

and VS Code does have an integrated terminal, 49

49

we can simply use that. 50

50

So I will close that now and open up the terminal like this. 51

51

And so here we go. 52

52

Now here we see that we already have one terminal running, 53

53

and so that's the one that is looking for changes here. 54

54

So it's that note process, 55

55

so that life server tool that we have been using, okay? 56

56

Now on windows, it's not going to say bash here probably, 57

57

and that's because the command line works 58

58

a little bit different on windows than it does 59

59

on Unix based systems like the Mac or Linux. 60

60

But anyway, most commands are the same 61

61

and whenever one is different, I will let you know, okay? 62

62

Now the first thing that you need to know 63

63

about any Command Line is that you are always in a folder. 64

64

So right now we are in this project folder, 65

65

and so that's the beauty of VS Code. 66

66

So whenever we open a terminal 67

67

in VS Code, we are always in this project folder itself, 68

68

and then from this location 69

69

in the file system, we can move up and down using commands. 70

70

Now, the first command that I'm going to show you 71

71

is LS which on Windows is called DIR, 72

72

which stands for Directory. 73

73

So on Windows type DIR 74

74

and on a Unix based system, LS, 75

75

and so this will then show you the contents 76

76

of the current folder, all right? 77

77

And so indeed, that's exactly the files 78

78

that we have here except for this one here, 79

79

which starts with a dot, 80

80

and so that's different but nevermind. 81

81

Then the next command is CD 82

82

which stands for Change Directory, 83

83

and with this, we can go up and down the file tree. 84

84

For now, let's just go up, and for that, we use dot dot. 85

85

And so with this, we are now in the desktop. 86

86

So let's take a look here as well, 87

87

and so here we see all of the folders 88

88

that we created before, okay? 89

89

And so let's now move into one of them, 90

90

so I can write again CD, and then let's say, 91

91

I want to move into folder 13. 92

92

So 13-advanced, 93

93

but I actually don't have to type all of it. 94

94

So instead I can just hit the tab key 95

95

and it will then auto complete this path for me. 96

96

So that's very handy whenever we don't want 97

97

to write everything by hand. 98

98

So hit Enter one more time, then LS or DIR on windows, 99

99

and so with this, we can check out all the files 100

100

that are in there. 101

101

So again, three files, and then we also have a folder. 102

102

So let's go there as well. 103

103

So CD IMG, and again, let's check out what we have in there. 104

104

So all of these images, all right? 105

105

So let's move up. 106

106

So that's dot dot again. 107

107

And actually we want to move up two levels. 108

108

And so here we can then add a slash and then again, dot dot. 109

109

And so this will move up two levels back to the desktop. 110

110

So here you see that we are at the desktop, okay? 111

111

Then we can also clear the console like this, 112

112

and so then everything disappears. 113

113

Okay, let's take a look again and as remember one more time, 114

114

it is DIR on Windows. 115

115

And so now let's actually go back to our project folder. 116

116

And again, now I can already auto complete 117

117

because this part of the string is already unique. 118

118

So I hit Tab, Enter, and then we are back 119

119

in our project folder. 120

120

So to clear this, I can again write clear, 121

121

but in VS Code, I can also hit Command key, 122

122

like this. 123

123

Well, at least it works on Mac. 124

124

I'm not sure about Windows. 125

125

So you can also type clear like this. 126

126

And so now let's actually here create a folder, 127

127

so that's MKDIR and then let's simply call this Test. 128

128

And so if we check this out now, 129

129

then here we have a new folder and you can see 130

130

that here as well, 131

131

and of course, I could also see it here 132

132

in the file system, 133

133

right? 134

134

So there it is. 135

135

And now back to VS Code actually 136

136

and let's move there now, 137

137

clear it again. 138

138

And now here let's just create some files. 139

139

So for that, I'm using Touch on the Mac 140

140

and on windows, it is Edit like this. 141

141

So let's say touch and then index.html, 142

142

and then let's also say script.js. 143

143

Now these are empty files now 144

144

but we can still check them out here, 145

145

and we could actually also call or live server here now. 146

146

So we can say live server and as always I can auto complete, 147

147

hit Enter and then it will open up in your browser tab, 148

148

and in this case, it didn't 149

149

because I'm using another browser. 150

150

So let me finish this by writing Ctrl+C, 151

151

then clicking here and doing it again. 152

152

And so I opened up this command again 153

153

by clicking the up arrow, okay? 154

154

And so now here it is, but let's cancel it again 155

155

because we're not really interested 156

156

in seeing this empty page. 157

157

And so again, that is Ctrl+ C, 158

158

even on the Mac, 159

159

so not command C. 160

160

And here I can actually use the arrow key 161

161

as many times as I want to see my past commands, 162

162

and I can also go back down like this. 163

163

So let's take a look again at the files we have 164

164

and we could also add multiple files all at once. 165

165

And this is actually something pretty useful, 166

166

and that I do all the time when I need to create 167

167

like multiple modules at once. 168

168

So let's say Jonas.js. 169

169

let's say bankers.JS, 170

170

and mapt.js. 171

171

And so now it created these three files all at once. 172

172

I'm not sure why I wrote JS there 173

173

but nevermind, of course, JS does not exist 174

174

but here we now have all these files 175

175

that we created previously, 176

176

okay? 177

177

So we have all these files now 178

178

but we're not really interested in them, 179

179

and so let's delete them, 180

180

and for that, we can use RM on the Mac and DEL on Windows. 181

181

So script JS for example, and let's say also jonas.js. 182

182

Let's take a look. 183

183

And now we only have these three left 184

184

and let's say that we actually wanted to move one 185

185

of them to the parent folder. 186

186

So for that, we can use MV, 187

187

let's say we want Map T 188

188

and once again, I hit Tab, 189

189

and so we need to specify first the name 190

190

of the file that should be moved, 191

191

and then the location into which that file should be moved. 192

192

So what is that location? 193

193

Well, in this case, we want to move it to the parent folder. 194

194

And so that is dot dot like this, and then the dash, 195

195

okay? 196

196

And you actually already saw it appear here, right? 197

197

And if we take a look here again, then there it is. 198

198

If we move to that parent folder 199

199

and check it out here as well, then there is mapt.js. 200

200

All right? 201

201

And so now we really don't need that test folder anymore. 202

202

So let's delete that as well, 203

203

and for that, we can use RMDIR. 204

204

So this stands for Remove Directory 205

205

while the opposite of that remember was MKDAR. 206

206

So Make a Directory. 207

207

And so now we just need to specify 208

208

that test and the directory is not empty. 209

209

So RMDIR only works for empty directories, 210

210

at least on the Mac. 211

211

On windows, I'm not sure how it works, 212

212

but apparently on the Mac only four empty directories. 213

213

However, at least on a Mac, 214

214

we can use another trick to remove a directory. 215

215

So we can use again RM which we also used 216

216

to remove files and then we can specify a Fleck. 217

217

So that's basically an option, which we write 218

218

with a dash and then a specific symbol or a letter. 219

219

So in this case, that's R which stands 220

220

for Recursive and then the name of the directory, 221

221

and so now it recursively basically deleted all 222

222

the files that are in here 223

223

and then also the directory itself. 224

224

And so as you see that folder is now gone, all right? 225

225

And again, on Windows, I'm not really sure about this one, 226

226

maybe RMDIR just worked, 227

227

but if not, well, if you really need it, 228

228

then of course you can always go ahead 229

229

and Google how it works on Windows as well. 230

230

But with this, I think we actually covered everything 231

231

that we needed. 232

232

Let's just get rid of that mapt.js. 233

233

So mapt.js, and again on Windows, 234

234

that would be DEL for delete, okay? 235

235

And so with this, we are back 236

236

to our initial working directory 237

237

and can now keep going into section.