1
00:00:00,000 --> 00:00:04,535
[MUSIC]

2
00:00:04,535 --> 00:00:10,479
We'll now continue our journey with
NPM scripts in this next exercise.

3
00:00:10,479 --> 00:00:15,182
Here, we're going to learn
how to be able to build

4
00:00:15,182 --> 00:00:20,335
a distribution folder which
contains all the files for

5
00:00:20,335 --> 00:00:27,970
our project that we can simply deploy
to a web server that hosts our website.

6
00:00:27,970 --> 00:00:33,050
So given the HTML, CSS,
and JavaScript files that

7
00:00:33,050 --> 00:00:39,010
we have already prepared in our project
folder, we're going to, from those,

8
00:00:39,010 --> 00:00:44,895
process them by using the various
tasks that we talked about.

9
00:00:44,895 --> 00:00:49,246
That is doing a CSS modification,

10
00:00:49,246 --> 00:00:54,740
concatenation, and
JavaScript uglification, minification,

11
00:00:54,740 --> 00:00:59,230
and HTML minification and

12
00:00:59,230 --> 00:01:04,895
then generate a distribution
folder with all the files.

13
00:01:04,895 --> 00:01:09,520
But essentially forms
the set of files that can be

14
00:01:09,520 --> 00:01:13,200
deployed to our web server
that hosts our website.

15
00:01:15,165 --> 00:01:21,005
To help you understand what we are going
to do in this particular exercise,

16
00:01:22,085 --> 00:01:29,102
as we note from our index.html page,
we have a set of

17
00:01:29,102 --> 00:01:34,352
CSS files that you included
here using this link tag here.

18
00:01:34,352 --> 00:01:38,742
Similarly, you have a set of
scripts that you have included

19
00:01:38,742 --> 00:01:42,847
at the bottom of this page
using the script tag.

20
00:01:42,847 --> 00:01:46,152
We've included a set of JavaScript code.

21
00:01:46,152 --> 00:01:51,150
Now, what we're going to do in this
exercise is to combine all these

22
00:01:51,150 --> 00:01:56,760
files into a single JavaScript
file that will be delivered

23
00:01:56,760 --> 00:02:03,710
from our web server to a browser
that is trying to view our website.

24
00:02:03,710 --> 00:02:08,480
This way, we minimize the number of
downloads that the browser needs to do

25
00:02:08,480 --> 00:02:10,930
in order to render our website.

26
00:02:10,930 --> 00:02:16,960
Similarly, we're going to combine all
the CSS code into one single CSS file,

27
00:02:16,960 --> 00:02:18,325
so that it can be delivered.

28
00:02:18,325 --> 00:02:24,353
So the combined CSS file will
contain all the code for

29
00:02:24,353 --> 00:02:31,751
Bootstrap plus Bootstrap social,
and also the Font Awesome and

30
00:02:31,751 --> 00:02:36,697
also the CSS code that we ourselves wrote.

31
00:02:36,697 --> 00:02:40,351
Similarly, there will be
a single JavaScript file which

32
00:02:40,351 --> 00:02:45,297
will contain the jQuery tether,
Bootstrap and the JavaScript code that we,

33
00:02:45,297 --> 00:02:49,790
ourselves wrote,
all combined together in one single file.

34
00:02:49,790 --> 00:02:53,610
Now, this is how you can do
deployment of your web pages.

35
00:02:53,610 --> 00:02:58,190
And instead of having multiple
such files there, one way that

36
00:02:59,560 --> 00:03:03,750
deployment is done is to combine them into
a single file so that one single download

37
00:03:03,750 --> 00:03:08,840
you get all the JavaScript code
necessary for rendering your web page.

38
00:03:08,840 --> 00:03:11,810
One single download you get
all the CSS code necessary for

39
00:03:11,810 --> 00:03:13,200
rendering your web page.

40
00:03:13,200 --> 00:03:16,590
And then, of course, the HTML file
itself is going to be downloaded.

41
00:03:18,530 --> 00:03:23,390
To get these tasks to be completed,
we need to use

42
00:03:23,390 --> 00:03:29,070
a certain set of NPM
modules to accomplish this.

43
00:03:29,070 --> 00:03:33,810
Now, what we will end up
doing is to build a folder

44
00:03:33,810 --> 00:03:38,760
in our projects file, and
then we call that folder as dist, D-I-S-T.

45
00:03:38,760 --> 00:03:42,580
I'm just randomly naming
that as a dist folder.

46
00:03:42,580 --> 00:03:47,100
In my case, what I mean by the dist
folder is a distribution folder.

47
00:03:47,100 --> 00:03:51,270
At the end of the set of steps we're
going to do, this folder will contain all

48
00:03:51,270 --> 00:03:59,510
the files that can be simply copied to
the web server that hosts our website.

49
00:03:59,510 --> 00:04:03,930
To get started, what we're
going to do is to set up a set of

50
00:04:05,140 --> 00:04:10,960
scripts here that will help
us to automate this process.

51
00:04:10,960 --> 00:04:13,930
So first thing, we might

52
00:04:13,930 --> 00:04:18,850
prepare the distribution folder once
then maybe we may do some edits

53
00:04:18,850 --> 00:04:23,310
to our source files then we may need
to recompile our distribution folder.

54
00:04:24,420 --> 00:04:29,370
First step, we would set up the script for
cleaning out that distribution folder

55
00:04:29,370 --> 00:04:33,050
essentially meaning,
delete the distribution folder.

56
00:04:33,050 --> 00:04:37,950
So to do that, I'm going to take the help
of an NPM module called as rimfraf.

57
00:04:37,950 --> 00:04:47,760
So I will install npm --save-dev rimfraf.

58
00:04:47,760 --> 00:04:51,920
This module helps us to clean
out a folder completely.

59
00:04:51,920 --> 00:04:56,370
So once I have installed this,
then I will set up a script

60
00:04:56,370 --> 00:05:01,550
in my package.json file to
clean out all the files.

61
00:05:01,550 --> 00:05:05,360
Going to the package.json file,
I'm going to add in, so

62
00:05:05,360 --> 00:05:11,380
remember always that coma is very,
very important in those scripts.

63
00:05:11,380 --> 00:05:15,200
Sometimes you'll run into problems
just because you forgot the comma.

64
00:05:15,200 --> 00:05:18,230
So make sure you put those
commas where necessary.

65
00:05:18,230 --> 00:05:21,800
The next descript that I'm
going to add is, clean,

66
00:05:23,410 --> 00:05:29,000
obviously as the name implies,
this is going to clean out my folder.

67
00:05:29,000 --> 00:05:32,510
So I will say rimraf dist.

68
00:05:32,510 --> 00:05:35,610
What this means is that this,
when executed,

69
00:05:35,610 --> 00:05:39,860
will clean out the distribution folder.

70
00:05:39,860 --> 00:05:42,215
So I will add that in, and

71
00:05:42,215 --> 00:05:46,780
then I will put that comma there because
I'm going to add more scripts below this.

72
00:05:46,780 --> 00:05:51,814
So let me save the changes,
the next step that I'm going to do is

73
00:05:51,814 --> 00:05:57,048
to install an npm module called
copy files which are used to copy

74
00:05:57,048 --> 00:06:03,206
some font files from my node modules
folder into my distribution folder.

75
00:06:03,206 --> 00:06:07,430
So that when it is deployed,
the font files also get deployed.

76
00:06:07,430 --> 00:06:12,840
Going to the terminal, the next
package that I'm going to install is

77
00:06:12,840 --> 00:06:19,860
npm -g, recall that this means that
it should be installed globally.

78
00:06:19,860 --> 00:06:23,900
Since I am doing this on a Mac,

79
00:06:23,900 --> 00:06:30,670
I should say sudo npm -g, if you are doing
it on Windows, you don't need the sudo.

80
00:06:30,670 --> 00:06:37,053
sudo npm -g install copy files.

81
00:06:42,837 --> 00:06:47,493
And then once that is installed ,this
NPM module will help me to copy

82
00:06:47,493 --> 00:06:50,360
files from one folder to another folder.

83
00:06:51,390 --> 00:06:54,650
Now, let me introduce
another NPM script here.

84
00:06:56,110 --> 00:06:59,534
Going to my package.json file,

85
00:06:59,534 --> 00:07:05,046
I'm going to create a new
scrip here name copyfonts.

86
00:07:05,046 --> 00:07:09,666
This script is going to enable me
to copy all the fonts files from my

87
00:07:09,666 --> 00:07:13,650
Font Awesome folder into
my distribution folder.

88
00:07:13,650 --> 00:07:17,510
So that when my website is rendered,

89
00:07:17,510 --> 00:07:21,500
all these fonts files can
also be sent out, such that

90
00:07:21,500 --> 00:07:26,110
my webpages are rendered correctly
with the Font Awesome fonts in place.

91
00:07:26,110 --> 00:07:30,949
So to do that, I'll say, copy files -f,

92
00:07:30,949 --> 00:07:36,530
-f means it just simply copies the files
without the full of hierarchy and

93
00:07:36,530 --> 00:07:40,550
simply copies the files from one
location to another location.

94
00:07:40,550 --> 00:07:43,594
So I'll say copy files -f

95
00:07:43,594 --> 00:07:53,594
node_modules/font_awesome/fonts/star

96
00:08:03,367 --> 00:08:09,416
And dist/fonts,

97
00:08:12,386 --> 00:08:14,970
And then save the changes.

98
00:08:14,970 --> 00:08:20,620
Let me now illustrate how these
two npm scripts work together.

99
00:08:20,620 --> 00:08:25,605
Going to my command window, I will type

100
00:08:25,605 --> 00:08:30,300
npm run copyfonts.

101
00:08:30,300 --> 00:08:34,650
When this runs,
it's going to create a folder

102
00:08:34,650 --> 00:08:38,640
named dist in my project folder hierarchy.

103
00:08:38,640 --> 00:08:39,880
And then inside the dist,

104
00:08:39,880 --> 00:08:44,730
there will be a subfolder named fonts,
which will contain the font files.

105
00:08:44,730 --> 00:08:46,310
So running this,

106
00:08:46,310 --> 00:08:50,480
you will immediately notice that
the distribution folder is created here.

107
00:08:50,480 --> 00:08:52,190
And inside the distribution folder,

108
00:08:52,190 --> 00:08:55,000
you can see that there is
a subfolder named fonts.

109
00:08:55,000 --> 00:08:58,760
And inside there, all the fontawesome
files have been copied.

110
00:09:00,070 --> 00:09:03,700
This is how the copyfonts script works.

111
00:09:04,790 --> 00:09:08,720
Now, I'm going to show you
how the clean script works.

112
00:09:08,720 --> 00:09:15,275
So if I type in npm run clean, this is
going to delete that distribution folder.

113
00:09:15,275 --> 00:09:17,805
So when I run that,
then you would notice that

114
00:09:17,805 --> 00:09:22,435
the distribution folder gets deleted
from my projects folder hierarchy.

115
00:09:22,435 --> 00:09:25,055
So this is how the clean works.

116
00:09:25,055 --> 00:09:28,075
Now that we have these two scripts set up,

117
00:09:28,075 --> 00:09:32,735
we now need to be able to build up
the remaining distribution files.

118
00:09:33,745 --> 00:09:39,034
In the next step, we're going to install
a node module called imagemin-cli,

119
00:09:39,034 --> 00:09:43,182
which is the command line interface for
the imagemin module.

120
00:09:43,182 --> 00:09:51,032
The imaginemin module will take a sect of
image files and then compress them down.

121
00:09:51,032 --> 00:09:57,550
So it stacked the size of those files
are minimized as far as possible,

122
00:09:57,550 --> 00:10:01,650
but still be rendered properly
when our website is rendered.

123
00:10:01,650 --> 00:10:05,060
So this way,
we will reduce the amount of data that

124
00:10:05,060 --> 00:10:09,870
needs to be downloaded by the browser
when it needs to render our webpage.

125
00:10:09,870 --> 00:10:16,250
So if you are including images into
your webpage, then imagemin task is

126
00:10:16,250 --> 00:10:21,950
something that you should learn in order
tor reduce the size of your image files.

127
00:10:21,950 --> 00:10:29,740
So to do that, I'm going to install this
imagemin node module as a global module.

128
00:10:29,740 --> 00:10:36,145
So I type in sudo, since I'm using a Mac,

129
00:10:36,145 --> 00:10:41,270
npm -g install imagemin-cli,

130
00:10:41,270 --> 00:10:46,770
and then install this node module.

131
00:10:50,730 --> 00:10:56,670
Sometimes on a Mac, some of the imagemin
plugins do not get installed correctly.

132
00:10:56,670 --> 00:11:02,979
So that's why I'm giving these
additional flags to the command,

133
00:11:02,979 --> 00:11:09,310
they're saying --unsafe-perm=true and
--allow-root.

134
00:11:09,310 --> 00:11:12,497
Once that installation is complete,

135
00:11:12,497 --> 00:11:18,183
let me set up a script in order to
do that magnification of my images.

136
00:11:18,183 --> 00:11:23,650
Going to package.json again,
I'm going to set up the next script here.

137
00:11:23,650 --> 00:11:32,350
So I would say imagemin is the script
name that I'm going to do,

138
00:11:32,350 --> 00:11:36,610
and I would say imagemin.

139
00:11:36,610 --> 00:11:43,930
And then since all my images are in
the img folder, I would say img/*,

140
00:11:43,930 --> 00:11:49,913
and then then many files are going to
be copied to dist image.

141
00:11:49,913 --> 00:11:54,997
So the original image files from the image
folder that I have will be copied

142
00:11:54,997 --> 00:12:00,300
into the distribution folder and
into the image subfolder there.

143
00:12:00,300 --> 00:12:03,616
So this completes my imagemin.

144
00:12:03,616 --> 00:12:07,460
Let me proceed forward with
the remaining set up, and

145
00:12:07,460 --> 00:12:13,070
then we will see how we'll make use of the
scripts that we have already set up there.

146
00:12:14,260 --> 00:12:19,270
Now that I have the test folder in there,
which I might create,

147
00:12:19,270 --> 00:12:26,450
I don't want to check in the dist
folder into my Git repository.

148
00:12:26,450 --> 00:12:31,640
So that's why into my .gitignore file,
I'm going to add in the dist folder also.

149
00:12:31,640 --> 00:12:37,060
So the dist folder will be ignored when
I do my check into the Git repository.

150
00:12:37,060 --> 00:12:43,342
So let's save the changes,
going back to package.json.

151
00:12:43,342 --> 00:12:49,710
Now, what I'm going to do next
is to install three different

152
00:12:50,870 --> 00:12:56,080
node modules,
which enable me to do the modifications

153
00:12:56,080 --> 00:13:02,550
to my index.html file and
the remaining HTML files there.

154
00:13:02,550 --> 00:13:09,280
At the command prompt,
type in npm install --save dev.

155
00:13:09,280 --> 00:13:16,498
I'm going to install a module
called as usemin-cli.

156
00:13:16,498 --> 00:13:21,166
This usemin-cli is the one that allows
me to do the transformation from my

157
00:13:21,166 --> 00:13:22,230
HTML file.

158
00:13:22,230 --> 00:13:26,870
And then concatenate and
combine all the CSS

159
00:13:26,870 --> 00:13:30,650
files into a single CSS file, and
then put it into the distribution folder.

160
00:13:30,650 --> 00:13:36,700
Similarly, all the JS files will be
concatenated and put into a single folder.

161
00:13:36,700 --> 00:13:38,720
So this usemin-cli is useful.

162
00:13:38,720 --> 00:13:44,005
But this usemin-cli takes the help

163
00:13:44,005 --> 00:13:51,051
of three other node
modules called the cssmin,

164
00:13:51,051 --> 00:13:56,350
then uglifyjs, and htmlmin.

165
00:13:56,350 --> 00:14:01,600
So I need to install these three node
modules in addition to usemin-cli.

166
00:14:01,600 --> 00:14:04,610
And I'm going to install this
locally into my project, so

167
00:14:04,610 --> 00:14:08,330
that's why npm install --save-def.

168
00:14:08,330 --> 00:14:13,910
So this way, they will be
remembered in my package.json file.

169
00:14:13,910 --> 00:14:15,890
So let's go ahead and
complete the installation.

170
00:14:17,230 --> 00:14:21,270
Now that I have installed the usemin and

171
00:14:21,270 --> 00:14:26,440
the related node modules,
I need to do some transformation

172
00:14:26,440 --> 00:14:30,695
to my index.html file and
the remaining HTML files.

173
00:14:30,695 --> 00:14:35,750
Such that the usemin node_module
recognizes that this group is

174
00:14:35,750 --> 00:14:42,330
a bunch of CSS files that need to be
compressed, calculated, and verified.

175
00:14:42,330 --> 00:14:47,730
Similarly, this is the group of JavaScript
files that need to be uglyfied,

176
00:14:47,730 --> 00:14:51,130
combined, and concatenated together.

177
00:14:51,130 --> 00:14:54,480
So to help the usemin package work,

178
00:14:54,480 --> 00:15:00,430
I need to add in a little bit
of code into my index.html file.

179
00:15:00,430 --> 00:15:07,942
So right before the first link there,

180
00:15:07,942 --> 00:15:14,747
I'm going to add in a mark up here,

181
00:15:14,747 --> 00:15:21,100
which says !-- build:css.

182
00:15:21,100 --> 00:15:25,621
Now, this !--, as you'll recognize,

183
00:15:25,621 --> 00:15:29,640
is a comment from html perspective.

184
00:15:29,640 --> 00:15:33,405
So inside that comment, I'm going to
include that this particular line is

185
00:15:33,405 --> 00:15:38,480
going to be used by the use menu
in order to recognize the block of

186
00:15:38,480 --> 00:15:43,370
code that specifies all the CSS
files that need to be transferred.

187
00:15:43,370 --> 00:15:49,743
So I say build.css, and
then I will specify

188
00:15:49,743 --> 00:15:54,770
the filename as css/main.css.

189
00:15:54,770 --> 00:15:57,160
This is the syntax for specifying.

190
00:15:57,160 --> 00:16:04,080
What this means is that these Block of
CSS files will all be combined together,

191
00:16:04,080 --> 00:16:10,510
and then concatenated, minified, and
then put into this file called main.css.

192
00:16:10,510 --> 00:16:15,723
And then this block will be identified
on the other side by saying,

193
00:16:21,873 --> 00:16:27,090
Hyphen --, okay, sorry.

194
00:16:27,090 --> 00:16:34,210
I forgot to include double
dash at the end there.

195
00:16:34,210 --> 00:16:37,050
That's the reason why this
was not turning colors.

196
00:16:37,050 --> 00:16:41,780
So sometimes you are happy that your

197
00:16:41,780 --> 00:16:46,540
editor is pointing out this potential
mistakes that you might be committing.

198
00:16:46,540 --> 00:16:51,779
So right there I would say endbuild and

199
00:16:51,779 --> 00:16:56,206
then -- right bracket there.

200
00:16:56,206 --> 00:17:00,904
Now, whatever is between this build and

201
00:17:00,904 --> 00:17:06,708
endbuild, this group will
be treated as a unit for

202
00:17:06,708 --> 00:17:12,252
being combined by our
usemin npm module there.

203
00:17:12,252 --> 00:17:14,890
Watch the syntax the usemin
module uses there.

204
00:17:16,230 --> 00:17:22,020
I need to do the same transformation to
contactus.html and aboutus.html also.

205
00:17:22,020 --> 00:17:26,759
So I'm going to copy this one

206
00:17:26,759 --> 00:17:31,306
here the lazy one that I am.

207
00:17:31,306 --> 00:17:35,149
I will simply just copy and

208
00:17:35,149 --> 00:17:39,866
paste into contactus.html and

209
00:17:39,866 --> 00:17:44,770
then also aboutus.html there.

210
00:17:44,770 --> 00:17:50,263
Similarly, going back to the index.html,

211
00:17:50,263 --> 00:17:56,477
I'll copy this inbuild and
then also copy that into

212
00:17:56,477 --> 00:18:01,840
contactus.html and aboutus.html data.

213
00:18:03,530 --> 00:18:08,990
Okay, let's save the changes
to all the files.

214
00:18:08,990 --> 00:18:12,190
Then, going to back to index.html.

215
00:18:12,190 --> 00:18:16,670
I'm going to repeat the same
thing at the bottom for my

216
00:18:16,670 --> 00:18:22,220
JavaScript scripts that
I've included there.

217
00:18:22,220 --> 00:18:26,730
So, going to the bottom here,

218
00:18:26,730 --> 00:18:30,026
what I need to do here,

219
00:18:30,026 --> 00:18:34,883
is to specify <!-- build js,

220
00:18:34,883 --> 00:18:39,225
and I will say js/main.js.

221
00:18:41,216 --> 00:18:43,130
Double hyphen, slash.

222
00:18:43,130 --> 00:18:47,781
So that's the starting of the block and
then the ending is specified by,

223
00:18:51,540 --> 00:18:55,034
Build, okay?

224
00:18:55,034 --> 00:19:00,782
So with these changes, now,
my index.html file is ready,

225
00:19:00,782 --> 00:19:07,899
and I have to do the same transformation
to contactus.html at the bottom.

226
00:19:14,090 --> 00:19:18,715
And aboutus.html also at the bottom.

227
00:19:25,340 --> 00:19:29,505
Similarly, this enbuild copied in.

228
00:19:32,892 --> 00:19:38,649
Into contactus.html and aboutus.html and
then save all the files.

229
00:19:40,130 --> 00:19:44,550
And that prepares our HTML files for

230
00:19:44,550 --> 00:19:48,940
being transformed to prepare
the distribution folder.

231
00:19:48,940 --> 00:19:53,540
These files will remain as such, but then
the transformed files will be put into

232
00:19:53,540 --> 00:19:58,380
the distribution folder
created from these files.

233
00:19:58,380 --> 00:20:02,948
Now, once we complete that,
let's set up some scripts.

234
00:20:02,948 --> 00:20:07,875
Going to package.json, I will set
up my next script called usemin.

235
00:20:11,930 --> 00:20:15,890
And then this says usemin,

236
00:20:19,977 --> 00:20:24,671
contactus.html -d dist,
this is the syntax for

237
00:20:24,671 --> 00:20:29,366
specify -d dist meaning
that the destination for

238
00:20:29,366 --> 00:20:32,507
this distribution dist folder.

239
00:20:32,507 --> 00:20:39,110
And then I would say htmlmin, this is
also going to minimize the HTML file.

240
00:20:39,110 --> 00:20:43,300
So it'll remove all the extraneous
spaces and comments from the HTML file.

241
00:20:43,300 --> 00:20:45,110
But they compress it down so

242
00:20:45,110 --> 00:20:48,350
that it contains the minimum
number of characters there.

243
00:20:48,350 --> 00:20:55,165
We'll look at the result after we
complete and do the transformation there.

244
00:20:55,165 --> 00:21:00,528
So that and then, not only that,

245
00:21:00,528 --> 00:21:05,509
and then htmlmin, and then say

246
00:21:05,509 --> 00:21:10,684
-o dist/contactus.html and

247
00:21:10,684 --> 00:21:15,664
&&, this means that there is

248
00:21:15,664 --> 00:21:19,970
more to come after this.

249
00:21:19,970 --> 00:21:25,730
Then I will say usemin

250
00:21:25,730 --> 00:21:31,171
then aboutus.html

251
00:21:31,171 --> 00:21:36,932
-d dist --htmlmin

252
00:21:36,932 --> 00:21:45,560
-o dist/aboutus.html.

253
00:21:45,560 --> 00:21:50,078
So that's the second one for
transforming the aboutus.html file.

254
00:21:50,078 --> 00:21:55,135
And then &&, this is a long script,

255
00:21:55,135 --> 00:21:58,139
usemin index.html,

256
00:21:58,139 --> 00:22:02,890
we need to transform all the files.

257
00:22:02,890 --> 00:22:08,150
So that's why I need to specify
each one explicitly there.

258
00:22:08,150 --> 00:22:11,910
usemin doesn't take wild cards, so

259
00:22:11,910 --> 00:22:16,080
that's the reason why I have to
specify the holding like [INAUDIBLE].

260
00:22:16,080 --> 00:22:21,365
And so usemin index.html

261
00:22:21,365 --> 00:22:27,426
-d dist --htmlmin

262
00:22:27,426 --> 00:22:34,160
-o dist/index.html.

263
00:22:34,160 --> 00:22:40,656
And then after that I put a comma because
I'm going to introduce the next script,

264
00:22:40,656 --> 00:22:45,940
which is, Called build.

265
00:22:45,940 --> 00:22:50,490
So this build script will
create my distribution folder.

266
00:22:50,490 --> 00:22:54,159
So to create my distribution folder,

267
00:22:54,159 --> 00:22:59,328
the first thing that I'm
going to do is npm run clean.

268
00:22:59,328 --> 00:23:07,090
And then npm run copyfonts.

269
00:23:07,090 --> 00:23:12,347
You have already seen these
two in action earlier,

270
00:23:12,347 --> 00:23:18,950
then I will say npm run imagemin
to create the minimized images,

271
00:23:18,950 --> 00:23:23,220
and then I would say npm run usemin.

272
00:23:23,220 --> 00:23:29,257
And this particular script will
build up my distribution folder,

273
00:23:29,257 --> 00:23:36,171
the contents of which can then be copied
to my web server to solve up my pitch.

274
00:23:36,171 --> 00:23:39,238
Save the changes.

275
00:23:39,238 --> 00:23:45,837
Let's now see how we build up the website.

276
00:23:45,837 --> 00:23:49,431
At this point, to build up our website and

277
00:23:49,431 --> 00:23:55,950
the command prompt is simply type
npm run build and then just execute.

278
00:23:55,950 --> 00:24:00,430
That script,
which in turn will execute a set

279
00:24:00,430 --> 00:24:05,440
of either scripts,
which in turn will complete the entire set

280
00:24:05,440 --> 00:24:10,870
of tasks that have to be executed in
order to prepare my distribution folder.

281
00:24:10,870 --> 00:24:13,690
So, let's go ahead and run this thing and

282
00:24:13,690 --> 00:24:18,520
then this will run through all
the different scripts there.

283
00:24:18,520 --> 00:24:23,320
It takes a few minutes for
it to complete, and when it is completed,

284
00:24:23,320 --> 00:24:29,838
then your distribution folder will now be
ready for deployment onto your web server.

285
00:24:29,838 --> 00:24:34,950
Going to our editor,

286
00:24:34,950 --> 00:24:38,750
you now see that the distribution
folder is now ready.

287
00:24:38,750 --> 00:24:44,020
Inside the distribution folder you
will see the three index files,

288
00:24:44,020 --> 00:24:48,580
and in the CSS folder, you will see
the single file called m ain.css,

289
00:24:48,580 --> 00:24:55,050
which contains all the Bootstraps CSS,
the Bootstraps CSS,

290
00:24:55,050 --> 00:24:57,660
and the CSS code that you have created.

291
00:24:58,690 --> 00:25:01,863
And the JS folder will
contain the main.js,

292
00:25:01,863 --> 00:25:05,287
which contains the Bootstrap,
the jQuery, and

293
00:25:05,287 --> 00:25:10,905
all the whole bunch of JavaScript code
combined together into one single file.

294
00:25:10,905 --> 00:25:15,638
The image will contain the optimized
images, and the fonts, obviously,

295
00:25:15,638 --> 00:25:18,730
you have seen earlier,
contain the font files.

296
00:25:18,730 --> 00:25:24,030
Now, let's take a quick look at
index.html that has been created here.

297
00:25:24,030 --> 00:25:27,290
So when you look at the index.html
that has been created here,

298
00:25:27,290 --> 00:25:31,120
you will notice that the whole
thing is literally unreadable,

299
00:25:32,530 --> 00:25:37,850
because when you did HTML min it
has stripped off all the extraneous

300
00:25:39,500 --> 00:25:42,800
comments, it has stripped
off all the spaces, and

301
00:25:42,800 --> 00:25:48,100
then created this whole
running set of characters.

302
00:25:49,540 --> 00:25:52,800
To the computer it doesn't make any
difference because it will render this

303
00:25:52,800 --> 00:25:55,190
webpage just as well.

304
00:25:55,190 --> 00:25:58,727
To you and me, it makes a difference,
because we can't read this easily.

305
00:26:01,038 --> 00:26:05,620
So this is what minification
causes to your HTML file.

306
00:26:05,620 --> 00:26:08,180
Let's take a look at the main.css.

307
00:26:08,180 --> 00:26:12,200
When you look at the main.css you
see the whole thing is crunched up

308
00:26:12,200 --> 00:26:15,090
into one single unit,
as you go to the bottom.

309
00:26:16,300 --> 00:26:20,808
If you are brave enough, go down to
the bottom and then you will see the,

310
00:26:24,793 --> 00:26:29,683
You will see hours specifically written

311
00:26:29,683 --> 00:26:34,870
CSS classes right down at the bottom here.

312
00:26:37,220 --> 00:26:42,801
Right there, you recognize
carousel button, and other things,

313
00:26:42,801 --> 00:26:49,693
nabber-dark, and other things there,
so it's all scrunched up into.

314
00:26:49,693 --> 00:26:52,896
So that's what minification, and costs.

315
00:26:52,896 --> 00:26:55,530
Main.js, same thing.

316
00:26:55,530 --> 00:26:56,545
Unreadable code there.

317
00:26:56,545 --> 00:26:59,440
Their computer, no difference.

318
00:26:59,440 --> 00:27:03,580
So with this,
our distribution folder is now complete.

319
00:27:03,580 --> 00:27:06,250
Let's check out our distribution folder.

320
00:27:06,250 --> 00:27:08,669
Fortunately, we have our
light server already running.

321
00:27:08,669 --> 00:27:12,014
So what I'm going to do is
to go to the browser, and

322
00:27:12,014 --> 00:27:16,867
then check out the index ready CLM
file in this distribution folder to

323
00:27:16,867 --> 00:27:20,507
see whether it is being
rendered correctly or not.

324
00:27:20,507 --> 00:27:25,870
Going to the browser,
in my address bar I will type,

325
00:27:25,870 --> 00:27:31,440
dist index.html, and

326
00:27:31,440 --> 00:27:36,920
notice that this particular
file is the distribution

327
00:27:36,920 --> 00:27:40,680
file that has been created, and
it contains exactly the same thing and

328
00:27:40,680 --> 00:27:47,370
renders exactly the same way as our
original webpage that we created.

329
00:27:47,370 --> 00:27:52,230
About, similarly, notice that this
aboutus.html is from the distribution

330
00:27:52,230 --> 00:27:57,490
folder and
this is rendered exactly as before,

331
00:27:57,490 --> 00:28:01,350
and also the contactus.html file.

332
00:28:01,350 --> 00:28:03,360
Everything works perfectly.

333
00:28:03,360 --> 00:28:08,970
So now all that is left for
you to do in order to deploy your webpage,

334
00:28:08,970 --> 00:28:15,530
or your website, is to simply copy
the contents from the dist folder,

335
00:28:15,530 --> 00:28:19,460
and then upload it to your web server, and

336
00:28:19,460 --> 00:28:24,830
then your web server is up and
running, serving up your website.

337
00:28:26,080 --> 00:28:28,740
With this, we complete this exercise.

338
00:28:28,740 --> 00:28:33,620
In this exercise,
we saw how we can make use of NBM

339
00:28:33,620 --> 00:28:38,636
scripts in order to build and
deploy our website.

340
00:28:38,636 --> 00:28:40,610
This may be a good time for

341
00:28:40,610 --> 00:28:45,223
you to do a Get Comment with
message NPM Scripts, Part 2.

342
00:28:45,223 --> 00:28:50,815
[MUSIC]