1
00:00:03,320 --> 00:00:09,060
It's now time to move on to the second part of the Gulp exercise.

2
00:00:09,060 --> 00:00:13,300
We'll continue doing similar steps as we did in

3
00:00:13,300 --> 00:00:18,230
the second part of the NPM script exercise and the current exercise.

4
00:00:18,230 --> 00:00:25,560
So, we'll arrange for deleting the distribution folder then copying the fonts,

5
00:00:25,560 --> 00:00:28,970
then also rebuilding the distribution folder,

6
00:00:28,970 --> 00:00:34,605
using similar node modules

7
00:00:34,605 --> 00:00:41,325
as what we used for Grant and also the NPM scripts.

8
00:00:41,325 --> 00:00:46,390
Our next step is to set up the tasks for deleting

9
00:00:46,390 --> 00:00:51,305
the distribution folder and also copying the fonts into the distribution folder.

10
00:00:51,305 --> 00:00:54,895
So let's set up a few node modules.

11
00:00:54,895 --> 00:00:59,930
The first one that we will set up is called del.

12
00:01:02,970 --> 00:01:08,195
This node model allows you to delete a folder.

13
00:01:08,195 --> 00:01:13,655
And let's go ahead and set up the Gulp tasks.

14
00:01:13,655 --> 00:01:18,780
With Gulp, fortunately, we don't need to install another module for the sake of copying

15
00:01:18,780 --> 00:01:24,505
because the Gulp streams allow us to do the copying of the files with little effort.

16
00:01:24,505 --> 00:01:27,945
Going to the Gulp file,

17
00:01:27,945 --> 00:01:31,870
I'm going to introduce the mixed Gulp module,

18
00:01:31,870 --> 00:01:34,185
which I will say, del.

19
00:01:34,185 --> 00:01:39,575
And then require the del module here.

20
00:01:39,575 --> 00:01:43,510
So once we require the del module there,

21
00:01:43,510 --> 00:01:47,524
we can go ahead and set up the tasks.

22
00:01:47,524 --> 00:01:51,695
So, we'll set up first the clean task here.

23
00:01:51,695 --> 00:01:54,730
So right after the default task,

24
00:01:54,730 --> 00:01:57,075
I'm going to set up the clean task.

25
00:01:57,075 --> 00:02:01,535
So I will say, Gulp task clean.

26
00:02:01,535 --> 00:02:04,320
And as you can see,

27
00:02:04,320 --> 00:02:08,125
this is set up as the function there.

28
00:02:08,125 --> 00:02:14,210
And inside that we would say, return del.

29
00:02:14,210 --> 00:02:20,885
And then the parameter supplied is the distribution folder here.

30
00:02:20,885 --> 00:02:24,320
So this will set up the clean task.

31
00:02:24,320 --> 00:02:26,280
And once this task is run,

32
00:02:26,280 --> 00:02:30,875
then the distribution folder is going to be deleted.

33
00:02:30,875 --> 00:02:40,525
Our next task is to copy the fonts into their distribution folder.

34
00:02:40,525 --> 00:02:44,625
So, I would say, copy fonts.

35
00:02:44,625 --> 00:02:48,595
And as you can see,

36
00:02:48,595 --> 00:02:55,570
we set up the function there and then close out the function.

37
00:02:55,570 --> 00:02:59,050
And then here, I would simply say,

38
00:02:59,050 --> 00:03:06,805
Gulp source and node

39
00:03:06,805 --> 00:03:17,860
modules, font awesome, fonts.

40
00:03:21,900 --> 00:03:33,370
You can see me using the globbing patterns, right there.

41
00:03:39,140 --> 00:03:44,750
And then once we select all the source files,

42
00:03:44,750 --> 00:03:50,560
we just pipe them into the destination file.

43
00:03:51,270 --> 00:03:54,645
So, you notice that we don't need

44
00:03:54,645 --> 00:04:01,450
a specific module for arranging the copying of the files.

45
00:04:01,450 --> 00:04:07,320
We simply use the Gulp source and destination streams to be able

46
00:04:07,320 --> 00:04:12,965
to pipe the files from the source location to the destination location.

47
00:04:12,965 --> 00:04:19,075
So, these two will set up the clean and the copy fonts task.

48
00:04:19,075 --> 00:04:24,010
Next, we're going to set up the NPM module for the imagemin task.

49
00:04:24,010 --> 00:04:26,865
So the minifying and compressing of the images.

50
00:04:26,865 --> 00:04:34,910
So, to do that add the prompt type Gulp imagemin.

51
00:04:34,910 --> 00:04:40,965
This is the Gulp plugin corresponding to the imagemin node module.

52
00:04:40,965 --> 00:04:45,065
So we installed as Gulp plugin,

53
00:04:45,065 --> 00:04:47,860
which is also node module.

54
00:04:47,860 --> 00:04:51,210
So once the installation is complete,

55
00:04:51,210 --> 00:04:54,120
let's set up that imagemin task.

56
00:04:54,120 --> 00:04:56,285
Going to our Gulp file,

57
00:04:56,285 --> 00:05:05,700
we'll setup the imagemin task here.

58
00:05:05,700 --> 00:05:10,895
So we'll set up the imagemin task as function.

59
00:05:10,895 --> 00:05:15,050
As you can see, the structuring of the code for

60
00:05:15,050 --> 00:05:20,965
the Gulp task definition is pretty much standard.

61
00:05:20,965 --> 00:05:25,110
So, you would say Gulp source.

62
00:05:25,110 --> 00:05:29,650
We specify the source files there and the source files in

63
00:05:29,650 --> 00:05:38,695
the image folder the JPG,

64
00:05:38,695 --> 00:05:42,855
GIF and PNG files from there.

65
00:05:42,855 --> 00:05:50,370
And then pipe them through the imagemin task.

66
00:05:50,370 --> 00:05:54,285
And then I will set up some parameters here.

67
00:05:54,285 --> 00:06:00,390
So, I will set up

68
00:06:00,390 --> 00:06:07,240
the optimizations level to three, progressive as true.

69
00:06:07,240 --> 00:06:14,534
So, this will turn them into progressive and interlaced images.

70
00:06:14,534 --> 00:06:19,570
So once this is set up,

71
00:06:20,630 --> 00:06:28,250
then the next step is to pipe them to their destination.

72
00:06:28,250 --> 00:06:36,435
And the destination here as you can see is the image folder in the distribution folder.

73
00:06:36,435 --> 00:06:40,110
So with this the imagemin task is now set up.

74
00:06:40,110 --> 00:06:44,430
Now, we'll build up the build task here.

75
00:06:44,430 --> 00:06:50,105
So, let me set up the build task.

76
00:06:50,105 --> 00:06:52,580
So for the build the task,

77
00:06:52,580 --> 00:06:57,940
what you would like to do is to first

78
00:06:59,150 --> 00:07:02,965
execute the clean task before

79
00:07:02,965 --> 00:07:05,005
the remaining tasks are executed

80
00:07:05,005 --> 00:07:08,220
because we want to first clean up the distribution folder.

81
00:07:08,220 --> 00:07:11,810
And that has to be completed before the remaining tasks are done.

82
00:07:11,810 --> 00:07:18,605
With Gulp, the tasks are executed in parallel automatically.

83
00:07:18,605 --> 00:07:21,980
And so it may so happen that

84
00:07:21,980 --> 00:07:25,455
if you execute the clean task in parallel with the remaining task,

85
00:07:25,455 --> 00:07:28,500
the clean task might end up finishing later and

86
00:07:28,500 --> 00:07:31,430
then deleting some of the work that has been done by the remaining tasks.

87
00:07:31,430 --> 00:07:34,580
So, that's why when you specify the Gulp task,

88
00:07:34,580 --> 00:07:36,920
if you specify clean as the first one in,

89
00:07:36,920 --> 00:07:39,105
as the second parameter here,

90
00:07:39,105 --> 00:07:42,625
then that means that that task will be completed first.

91
00:07:42,625 --> 00:07:45,730
And then the remaining tasks will be executed.

92
00:07:45,730 --> 00:07:48,395
So, I would say Gulp start.

93
00:07:48,395 --> 00:07:49,830
With the Gulp start,

94
00:07:49,830 --> 00:07:54,445
all the tasks that we specify here are going to be executed in parallel.

95
00:07:54,445 --> 00:08:03,975
So, I'm going to execute the copy fonts task and also the imagemin task together.

96
00:08:03,975 --> 00:08:07,255
Later on, we will set up the usemin task and then

97
00:08:07,255 --> 00:08:12,050
execute that also along with the copy fonts and imagemin.

98
00:08:12,180 --> 00:08:17,400
One last thing that I need to add in before we go ahead and execute

99
00:08:17,400 --> 00:08:23,120
the tasks is to go up here and then require the imagemin.

100
00:08:23,120 --> 00:08:30,115
I would say imagemin require Gulp imagemin.

101
00:08:30,115 --> 00:08:33,810
And then save the changes.

102
00:08:34,670 --> 00:08:39,430
Let's now go ahead and check the build task.

103
00:08:39,430 --> 00:08:45,400
At the prompt, if your type Gulp build,

104
00:08:45,400 --> 00:08:47,540
then it should carry out all the three tasks.

105
00:08:47,540 --> 00:08:50,440
So you'll see that it starts the clean task and

106
00:08:50,440 --> 00:08:54,290
completes it and then it starts the actual build task.

107
00:08:54,290 --> 00:08:56,905
So, you can see that by specifying

108
00:08:56,905 --> 00:09:00,075
the clean should be completed before the actual build happens,

109
00:09:00,075 --> 00:09:03,255
then you make sure that you first clean up the distribution folder

110
00:09:03,255 --> 00:09:08,170
then the build task which comprises the copy fonts and the imagemin,

111
00:09:08,170 --> 00:09:14,140
all of them completing in parallel will be executed thereafter.

112
00:09:14,140 --> 00:09:16,290
Going to the editor,

113
00:09:16,290 --> 00:09:18,705
you'll see that in the distribution folder,

114
00:09:18,705 --> 00:09:23,560
we see that the fonts have been copied and images have been copied correctly.

115
00:09:23,560 --> 00:09:29,970
The last step is to set the usemin task in order to build up the distribution folder.

116
00:09:29,970 --> 00:09:32,895
To set up they usemin task,

117
00:09:32,895 --> 00:09:40,195
I'm going to install a few Gulp plugins so I would say NPM install.

118
00:09:40,195 --> 00:09:46,310
And then I would install the uglify Gulp file plugin,

119
00:09:46,310 --> 00:09:48,635
which obviously is also a node module.

120
00:09:48,635 --> 00:09:57,170
And then I will install the usemin node module and then the rev node module.

121
00:09:57,170 --> 00:10:02,580
The Gulp rev node module is like the file graph rev grant plugin that we saw earlier.

122
00:10:02,580 --> 00:10:06,170
It's slightly different from the file rev that we saw earlier,

123
00:10:06,170 --> 00:10:09,995
but serves the same purpose.

124
00:10:09,995 --> 00:10:20,315
So, Gulp rev, then I will set up Gulp clean CSS and then Gulp flatmap.

125
00:10:20,315 --> 00:10:24,390
You'll see the reason for this as we-

126
00:10:26,270 --> 00:10:31,720
We set up our usemin task, so,

127
00:10:31,720 --> 00:10:40,470
and gulp-html min and we go ahead and install these modules here.

128
00:10:40,470 --> 00:10:43,070
Once the modules are installed,

129
00:10:43,070 --> 00:10:50,555
let's go ahead and require these modules in our gulpfile and then set up the usemin task.

130
00:10:50,555 --> 00:10:54,620
Going to our gulpfile right at the top,

131
00:10:54,620 --> 00:10:59,920
I'm going to require the modules that I just now installed.

132
00:10:59,920 --> 00:11:08,200
So, the uglify gulp uglify.

133
00:11:08,200 --> 00:11:11,820
So the uglify task then

134
00:11:11,820 --> 00:11:19,590
the usemin task gulp usemin,

135
00:11:19,590 --> 00:11:21,970
then after that

136
00:11:21,970 --> 00:11:32,850
the rev then,

137
00:11:33,440 --> 00:11:38,620
forgot there, comma there.

138
00:11:38,620 --> 00:11:46,775
Be very careful not to miss out these commas there.

139
00:11:46,775 --> 00:12:08,789
So require gulp clean-css, then flatmap, and htmlmin.

140
00:12:08,789 --> 00:12:18,360
So these are the gulp modules

141
00:12:18,360 --> 00:12:19,970
that we installed,

142
00:12:19,970 --> 00:12:24,580
so let's save the changes and then we'll go down and set up the usemin task.

143
00:12:24,580 --> 00:12:28,155
Coming to the bottom of the gulpfile,

144
00:12:28,155 --> 00:12:34,405
right there I will set up the usemin task.

145
00:12:34,405 --> 00:12:36,940
So, what does the usemin task do?

146
00:12:36,940 --> 00:12:43,040
So the usemin task takes

147
00:12:43,040 --> 00:12:50,640
the htmlfiles and then looks up the CSS and JavaScript blocks in the htmlfiles,

148
00:12:50,640 --> 00:12:55,610
combines, concatenates, and minifies and nuglifies the files and then

149
00:12:55,610 --> 00:13:01,325
replaces them by using the concatenated file in the distribution folder.

150
00:13:01,325 --> 00:13:02,965
So to get started,

151
00:13:02,965 --> 00:13:10,460
I would first start by specifying gulp source.

152
00:13:10,460 --> 00:13:12,455
So where are the source files?

153
00:13:12,455 --> 00:13:17,090
So the source files are the htmlfiles in the current folder.

154
00:13:17,090 --> 00:13:24,830
So gulp./start.html, then I'm going to

155
00:13:24,830 --> 00:13:32,990
pipe this gulpfiles through this gulp module called as flatmap.

156
00:13:32,990 --> 00:13:34,535
What does flatmap do?

157
00:13:34,535 --> 00:13:37,980
Flatmap takes these multiple htmlfiles and then

158
00:13:37,980 --> 00:13:42,415
starts up parallel pipelines for each one of these htmlfiles.

159
00:13:42,415 --> 00:13:46,295
Each one of them going through the same set of steps and then finally,

160
00:13:46,295 --> 00:13:49,550
converging and copying it into the destination folder.

161
00:13:49,550 --> 00:13:52,560
So as you can see in our current folder,

162
00:13:52,560 --> 00:13:57,095
we have got contactus.html, aboutus.html, and index.html.

163
00:13:57,095 --> 00:14:00,020
All three of them need to be processed.

164
00:14:00,020 --> 00:14:04,465
So, the flatmap allows us to process these in parallel,

165
00:14:04,465 --> 00:14:10,280
starting up the same set of pipe for each of these files,

166
00:14:10,280 --> 00:14:12,910
so that's why I'm making use of the flatmap there.

167
00:14:12,910 --> 00:14:20,650
So, flatmap, and then inside the flatmap I need to specify the function,

168
00:14:20,650 --> 00:14:25,315
the two parameters; stream, file.

169
00:14:25,315 --> 00:14:32,590
So, the file basically takes each one of those source files that we have specified there,

170
00:14:32,590 --> 00:14:39,550
and then treats them to the same set of functions here,

171
00:14:39,550 --> 00:14:43,460
and then starts up its separate stream for each one of them.

172
00:14:43,460 --> 00:14:48,585
So, I will return stream,

173
00:14:48,585 --> 00:14:52,990
and then I will pipe each one of these

174
00:14:53,070 --> 00:15:00,930
through the usemin task which itself,

175
00:15:00,930 --> 00:15:08,240
comprises of the css

176
00:15:09,630 --> 00:15:14,470
and uglify JavaScript and html task.

177
00:15:14,470 --> 00:15:20,965
So for the css, I'm going to perform the revision part.

178
00:15:20,965 --> 00:15:26,220
So the css part will obviously do the concatenation and minification and so on,

179
00:15:26,220 --> 00:15:29,520
and then applies the rev to that so that it acts

180
00:15:29,520 --> 00:15:34,930
that 20 bit string to the main.css file there.

181
00:15:34,930 --> 00:15:36,905
So for css I set that up,

182
00:15:36,905 --> 00:15:39,440
and then for html,

183
00:15:39,440 --> 00:15:42,890
because I have multiple html files,

184
00:15:42,890 --> 00:15:45,745
I need to specify this as a function,

185
00:15:45,745 --> 00:15:55,540
and inside this function I would say return htmlmin.

186
00:15:55,570 --> 00:16:05,660
And then inside there I will give it parameter collapseWhitespace,

187
00:16:05,660 --> 00:16:11,955
and that parameter would be set to true.

188
00:16:11,955 --> 00:16:18,630
And so this essentially completes the html part of it.

189
00:16:18,630 --> 00:16:24,970
And then the next one is the js part of it,

190
00:16:24,970 --> 00:16:26,160
the JavaScript part of it,

191
00:16:26,160 --> 00:16:35,105
which I need to do the uglify and then the revision for it.

192
00:16:35,105 --> 00:16:44,060
And then, if I have

193
00:16:44,060 --> 00:16:48,355
any inline javascript code then I need to apply

194
00:16:48,355 --> 00:16:54,580
the uglify task for that,

195
00:16:54,580 --> 00:16:57,435
and then for the inlinecss code,

196
00:16:57,435 --> 00:17:06,640
I will use the cleanCss task there with concat as the parameter there.

197
00:17:06,640 --> 00:17:09,880
So with this, I have set up my usemin task.

198
00:17:09,880 --> 00:17:13,950
So it will cater for all these different actions on my behalf.

199
00:17:13,950 --> 00:17:17,010
And then once they are done finally,

200
00:17:17,010 --> 00:17:22,420
the resulting streams will be

201
00:17:22,420 --> 00:17:29,845
piped to the distribution folder.

202
00:17:29,845 --> 00:17:34,290
So with this, the usemin task is now all set setup.

203
00:17:34,290 --> 00:17:36,295
Let me save the changes.

204
00:17:36,295 --> 00:17:41,900
And then I will go down to the build task and then after imagemin I'm going to also

205
00:17:41,900 --> 00:17:47,955
add usemin as one of the tasks to be performed by the build task.

206
00:17:47,955 --> 00:17:50,410
So, with this changes, so,

207
00:17:50,410 --> 00:17:52,945
we have modified the build task,

208
00:17:52,945 --> 00:18:00,720
let's go ahead and then check whether the distribution folder is built correctly or not.

209
00:18:00,720 --> 00:18:04,315
Going to the prompt, let me type in gulp

210
00:18:04,315 --> 00:18:10,065
build and then wait for gulp to build up all the different tasks.

211
00:18:10,065 --> 00:18:13,585
It'll take a little bit of time for the usemin to complete its work,

212
00:18:13,585 --> 00:18:18,265
and when it is done completing the transformation,

213
00:18:18,265 --> 00:18:22,875
then my distribution folder should now be ready for being viewed.

214
00:18:22,875 --> 00:18:28,260
Going to the editor you can now see that the distribution folder has been

215
00:18:28,260 --> 00:18:34,345
prepared here and you can see the index, contactus, and aboutus.htmlfile.

216
00:18:34,345 --> 00:18:37,470
You can see that when you open the index.htmlfile,

217
00:18:37,470 --> 00:18:39,365
it has been compressed.

218
00:18:39,365 --> 00:18:42,605
And the htmlmin has been done,

219
00:18:42,605 --> 00:18:46,515
in particular note how the css file has been replaced

220
00:18:46,515 --> 00:18:54,300
with css/main- and then you'll see a long string there.css.

221
00:18:54,300 --> 00:19:04,300
So this is just like the file rev that you saw in grunt with the gulp rev module,

222
00:19:04,300 --> 00:19:06,960
this is what it does to the name of the file.

223
00:19:06,960 --> 00:19:11,350
So if you look at the css you can see that the name of the file is main hyphen and

224
00:19:11,350 --> 00:19:16,470
then some string there dot css and similarly for the javascriptfile.

225
00:19:16,470 --> 00:19:20,345
So, this is what the gulp rev module does,

226
00:19:20,345 --> 00:19:22,505
and then all these three files are prepared.

227
00:19:22,505 --> 00:19:26,850
Let's take a look at these files in the browser.

228
00:19:26,850 --> 00:19:33,195
Going to the browser I can see that there source files are being saved correctly.

229
00:19:33,195 --> 00:19:36,190
Let me check out the distribution folder.

230
00:19:36,190 --> 00:19:38,220
So in the distribution folder,

231
00:19:38,220 --> 00:19:42,350
the index.html that has been prepared by

232
00:19:42,350 --> 00:19:47,925
the gulp build task seems to be working correctly.

233
00:19:47,925 --> 00:19:51,560
Let me also check out the about page,

234
00:19:51,560 --> 00:19:55,435
and we can see that about page is also built correctly,

235
00:19:55,435 --> 00:19:58,680
and also the contact page.

236
00:19:58,680 --> 00:20:04,075
So now you can see that our gulp task is completed.

237
00:20:04,075 --> 00:20:07,105
So with this, we complete this exercise.

238
00:20:07,105 --> 00:20:11,430
In this exercise, we set up the cleaning up and

239
00:20:11,430 --> 00:20:15,780
the copying of the font files to our distribution folder,

240
00:20:15,780 --> 00:20:18,530
we did the imagemin task and then finally we set up

241
00:20:18,530 --> 00:20:22,865
the usemin task to build up our distribution folder.

242
00:20:22,865 --> 00:20:26,140
With this we complete this exercise.

243
00:20:26,140 --> 00:20:33,770
This may be a good time for you to do a good comment with the message Gulp part two.