1
00:00:03,060 --> 00:00:06,095
Now that we have granted enough,

2
00:00:06,095 --> 00:00:08,700
it's time to Gulp.

3
00:00:08,700 --> 00:00:12,010
We'll try to perform the same kind of

4
00:00:12,010 --> 00:00:16,235
tasks that we've performed with both NPM Scripts and Grunt,

5
00:00:16,235 --> 00:00:22,995
but now we'll try to do the same using Gulp and Gulp Plug-ins.

6
00:00:22,995 --> 00:00:29,090
To get started, let's first install Gulp as a global module.

7
00:00:29,090 --> 00:00:31,635
So, to do that, at the prompt,

8
00:00:31,635 --> 00:00:37,970
type npm -g install gulp,

9
00:00:38,740 --> 00:00:42,380
this will install Gulp as a global module and make

10
00:00:42,380 --> 00:00:45,625
it available for use on the command line.

11
00:00:45,625 --> 00:00:47,605
After we complete this,

12
00:00:47,605 --> 00:00:51,425
the next step is to install Gulp locally in our project.

13
00:00:51,425 --> 00:00:53,975
So to do that, at the prompt,

14
00:00:53,975 --> 00:01:01,700
type npm install gulp --save-dev.

15
00:01:01,700 --> 00:01:03,835
Once we have completed these two,

16
00:01:03,835 --> 00:01:10,765
it's time to go ahead and configure our Gulp tasks.

17
00:01:10,765 --> 00:01:14,195
Before we do that, our next step,

18
00:01:14,195 --> 00:01:18,170
we will install the Gulp Sass plug-in so that we can

19
00:01:18,170 --> 00:01:23,560
configure the Sass to see as conversion task in our Gulp file.

20
00:01:23,560 --> 00:01:26,460
So, to go ahead and do that,

21
00:01:26,460 --> 00:01:30,580
type npm install

22
00:01:31,420 --> 00:01:39,100
gulp sass --save-dev.

23
00:01:40,270 --> 00:01:43,835
Also while we're at it,

24
00:01:43,835 --> 00:01:48,305
we might as well install the Browser Sync Gulp Task too,

25
00:01:48,305 --> 00:01:53,835
so that we can configure both this one after another.

26
00:01:53,835 --> 00:02:07,960
So, I'll install, npm install browser-sync --save-dev.

27
00:02:08,830 --> 00:02:11,480
Once these two are installed,

28
00:02:11,480 --> 00:02:17,980
then let's go ahead and create our Gulp file and then configure our Gulp Tasks here.

29
00:02:17,980 --> 00:02:20,590
Going to our project folder,

30
00:02:20,590 --> 00:02:27,905
let's create a new file and then name it gulpfile.js,

31
00:02:27,905 --> 00:02:32,380
and in this file, we're going to configure our Gulp Tasks.

32
00:02:32,380 --> 00:02:34,950
So, once the gulpfile.js is ready,

33
00:02:34,950 --> 00:02:39,940
well configure the Gulp Tasks here by first beginning

34
00:02:39,940 --> 00:02:50,310
with 'use strict' and then var gulp.

35
00:02:50,310 --> 00:02:57,585
So, we need to require the gulp node modules,

36
00:02:57,585 --> 00:02:59,810
and also while we're at it,

37
00:02:59,810 --> 00:03:07,600
we'll require the sass node module.

38
00:03:12,470 --> 00:03:16,310
As I mentioned in the previous exercise,

39
00:03:16,310 --> 00:03:22,110
it will become more clearer to you why the code is written like this,

40
00:03:22,110 --> 00:03:30,245
once you understand more about node modules in a later course.

41
00:03:30,245 --> 00:03:35,535
browserSync, so what we have done is to include the Gulp

42
00:03:35,535 --> 00:03:40,895
Contrast and bowserSync node modules into our Gulp file.

43
00:03:40,895 --> 00:03:42,545
And once you have done that,

44
00:03:42,545 --> 00:03:45,360
it is time to configure our Gulp Tasks.

45
00:03:45,360 --> 00:03:47,940
As we learnt previously,

46
00:03:47,940 --> 00:03:52,340
Gulp is a code-based on way of configuring

47
00:03:52,340 --> 00:03:57,815
tasks unlike Grunt which relies more on configuration of the tasks.

48
00:03:57,815 --> 00:04:00,455
So, in case of Gulp,

49
00:04:00,455 --> 00:04:04,230
the baby will set up our tasks to type

50
00:04:04,230 --> 00:04:11,340
gulp.task and then let's set up a task name 'sass',

51
00:04:11,340 --> 00:04:13,545
and then for this task,

52
00:04:13,545 --> 00:04:17,630
we'll set this up as a function,

53
00:04:19,990 --> 00:04:23,205
and this is how the code is prepared.

54
00:04:23,205 --> 00:04:28,850
So, Gulp Tasks Sass function and in here,

55
00:04:28,850 --> 00:04:32,310
we are setting up the Gulp Tasks,

56
00:04:34,850 --> 00:04:45,030
so we'll type return gulp.src('./css/*.scss') As we learnt,

57
00:04:45,030 --> 00:05:00,800
Gulp is a tool-based around code over configuration.

58
00:05:00,800 --> 00:05:06,630
So, we'll prepare this task as such.

59
00:05:06,630 --> 00:05:14,390
So, you see that we have specified Gulp source pipe sass on,

60
00:05:14,390 --> 00:05:18,630
and then here, error.

61
00:05:19,220 --> 00:05:22,600
So, if an error occurs,

62
00:05:24,020 --> 00:05:31,870
we'll use the Sass way to log the error and then pipe this

63
00:05:31,870 --> 00:05:43,480
through gulp.dest('./css'), and that

64
00:05:52,970 --> 00:05:59,270
completes the configuration of the Gulp Sass Tasks.

65
00:05:59,270 --> 00:06:03,540
You must be wondering why we write the code like this.

66
00:06:03,540 --> 00:06:06,960
It says gulp source and then specify something there,

67
00:06:06,960 --> 00:06:10,650
and then the next one says pipe and then the next one says pipe.

68
00:06:10,650 --> 00:06:16,045
Let's understand the Gulp way of doing things in a little more detail.

69
00:06:16,045 --> 00:06:19,855
To help explain why we configure Tasks like that,

70
00:06:19,855 --> 00:06:24,730
I have an explanation of what we call Gulp Streams.

71
00:06:24,730 --> 00:06:29,900
The way Gulp works is like you take a set of files and you specify the set of

72
00:06:29,900 --> 00:06:35,405
files by saying gulp source as we did with the Sass Tasks there.

73
00:06:35,405 --> 00:06:39,005
So here, this is the function that takes the files.

74
00:06:39,005 --> 00:06:44,405
You could even specify the files using the globbing patterns that we learnt in Grunt,

75
00:06:44,405 --> 00:06:49,410
and then it creates a stream of objects that represents these files.

76
00:06:49,410 --> 00:06:51,560
Now, once the stream is created,

77
00:06:51,560 --> 00:06:54,480
then the stream can be piped through a set of

78
00:06:54,480 --> 00:06:58,795
functions one after another in order to transform these files.

79
00:06:58,795 --> 00:07:07,400
And then finally, the resulting transformed files can be put into a destination location.

80
00:07:07,400 --> 00:07:09,795
So that's why we specify Gulp source,

81
00:07:09,795 --> 00:07:11,585
then we specify pipe.

82
00:07:11,585 --> 00:07:15,945
So, the pipe allows the stream to be piped through a function,

83
00:07:15,945 --> 00:07:18,295
and so, that's why we said dot pipe,

84
00:07:18,295 --> 00:07:20,600
and then we said gulp.

85
00:07:20,600 --> 00:07:23,965
And then we said sass on error.

86
00:07:23,965 --> 00:07:30,255
And then the next one says Pipe Gulp Dest.

87
00:07:30,255 --> 00:07:35,950
And so, the gulp dest specifies the destination of the files that have been processed.

88
00:07:35,950 --> 00:07:43,860
So, that's how a typical task is specified in gulp because but gulp operates on streams.

89
00:07:43,860 --> 00:07:48,875
So, your stream files through the pipes until they

90
00:07:48,875 --> 00:07:54,805
are transferred and then they will be deposited at specified destination.

91
00:07:54,805 --> 00:07:59,610
So, you will see similar structure for many of the gulp tasks that we

92
00:07:59,610 --> 00:08:04,740
would configure in this exercise and the next exercise.

93
00:08:04,740 --> 00:08:11,460
Now that you have understood a little bit about how gulp works with streams and how

94
00:08:11,460 --> 00:08:21,005
the gulp task uses the pipe to process files through a set of function,

95
00:08:21,005 --> 00:08:28,290
and it becomes more clear to you why we set up this sass task as seen in this code here.

96
00:08:28,290 --> 00:08:33,260
The next task that we are going to configure is called gulp,

97
00:08:33,340 --> 00:08:39,900
and we'll configure this task as sass watch.

98
00:08:39,900 --> 00:08:42,700
So, this is a watch task that we are going to configure,

99
00:08:42,700 --> 00:08:48,920
and then you would specify function.

100
00:08:49,190 --> 00:08:51,330
And so in here,

101
00:08:51,330 --> 00:08:53,320
the gulp sass watch task,

102
00:08:53,320 --> 00:08:58,490
what we do is specify the files that we're going to be watching.

103
00:08:58,490 --> 00:09:05,600
So, we use the gulp watch task to watch the file.

104
00:09:05,600 --> 00:09:08,830
So, the watch is already built into gulp.

105
00:09:08,830 --> 00:09:17,660
So, it will take gulp watch and then we specify the files there *.SCSS.

106
00:09:17,660 --> 00:09:21,390
So, as you can see, the gulp watch will watch

107
00:09:21,390 --> 00:09:25,915
these files and then when any changes to these files occur,

108
00:09:25,915 --> 00:09:30,225
then it'll run that sass task,

109
00:09:30,225 --> 00:09:32,975
which we have specified earlier.

110
00:09:32,975 --> 00:09:37,360
So, that's how that sass watch task is set up.

111
00:09:37,360 --> 00:09:39,495
Now that we have done these two,

112
00:09:39,495 --> 00:09:42,730
let's set up that browser sync task next.

113
00:09:42,730 --> 00:09:47,650
So, close that with the semicolon and then the

114
00:09:47,650 --> 00:09:53,375
next task that we will set up is the browser sync task.

115
00:09:53,375 --> 00:10:01,735
So, I will specify browser sync task there.

116
00:10:01,735 --> 00:10:04,550
And then for the browser sync task,

117
00:10:04,550 --> 00:10:07,480
I will specify that function.

118
00:10:07,480 --> 00:10:11,725
Again, note the structure in which we write the code,

119
00:10:11,725 --> 00:10:16,405
gulp task and then you specify something that followed but with a function.

120
00:10:16,405 --> 00:10:17,990
Now again as I said,

121
00:10:17,990 --> 00:10:23,155
we learn node modules in the last course of this specialization,

122
00:10:23,155 --> 00:10:28,520
it'll become more clearer to you why not modules written with this structure,

123
00:10:28,520 --> 00:10:31,790
and why the functions are written like this.

124
00:10:31,790 --> 00:10:34,470
So, we say gulp task browser sync.

125
00:10:34,470 --> 00:10:38,260
Here, I'm going to define a variable,

126
00:10:38,260 --> 00:10:40,920
a JavaScript variable called files,

127
00:10:40,920 --> 00:10:45,050
which is nothing but in array,

128
00:10:45,160 --> 00:10:55,935
and that inside those files array I would specify all the files that

129
00:10:55,935 --> 00:10:58,790
if modified the browser sync needs

130
00:10:58,790 --> 00:11:07,125
to cause the reloading or the file.

131
00:11:07,125 --> 00:11:12,690
So, html files, the CSS files in the CSS folder,

132
00:11:12,690 --> 00:11:18,420
and then similarly I will also watch the image files,

133
00:11:26,080 --> 00:11:31,960
and the JavaScript files.

134
00:11:33,840 --> 00:11:36,730
All these files if any of them change.

135
00:11:36,730 --> 00:11:40,800
So, after this, I will configure the browser sync here.

136
00:11:40,800 --> 00:11:44,315
So, I will say browser sync.

137
00:11:44,315 --> 00:11:49,010
We have already defined this variable called browser sync earlier.

138
00:11:49,010 --> 00:11:54,400
So, we have to initialize the browser sync,

139
00:11:56,230 --> 00:12:01,805
and so, the first parameter to that

140
00:12:01,805 --> 00:12:08,895
is the files that will need to be watched,

141
00:12:08,895 --> 00:12:18,160
and then the second parameter specifies the options that we are giving to the browser.

142
00:12:18,160 --> 00:12:21,720
So, the option that I'm specifying is for the server.

143
00:12:21,720 --> 00:12:31,350
I will specify the base directory as the current directory,

144
00:12:31,350 --> 00:12:38,595
and then that completes the specification of the browser sync task.

145
00:12:38,595 --> 00:12:43,280
So, with this, we have completed specifying the browser sync task here.

146
00:12:43,280 --> 00:12:46,750
So, you can see that how we configured browser sync task,

147
00:12:46,750 --> 00:12:48,480
we specified the files and then save

148
00:12:48,480 --> 00:12:51,750
browser sync in it and supply the files as the first parameter.

149
00:12:51,750 --> 00:12:58,940
The second parameter is the options for the browser sync plugin.

150
00:12:58,940 --> 00:13:02,620
Then finally, we'll schedule or

151
00:13:02,620 --> 00:13:10,680
we'll configure the task called default.

152
00:13:10,680 --> 00:13:17,005
Just like me have the default task in Grunt,

153
00:13:17,005 --> 00:13:23,475
we can also have a similar default task defined for gulp.

154
00:13:23,475 --> 00:13:28,095
So, here we say gulp task default browser sync,

155
00:13:28,095 --> 00:13:33,275
and then specify function.

156
00:13:33,275 --> 00:13:42,085
And inside there we'll specify gulp start.

157
00:13:42,085 --> 00:13:46,185
So, this specifies that I should start

158
00:13:46,185 --> 00:13:54,730
this other task that sass watch task.The sass watch task needs to be started.

159
00:13:54,840 --> 00:14:00,370
Make sure that the browser sync task is running before the sass watch task is started.

160
00:14:00,370 --> 00:14:04,060
So, this is the syntax for specifying that in gulp.

161
00:14:04,060 --> 00:14:08,095
So, with this, we have configured everything that we need in gulp file.

162
00:14:08,095 --> 00:14:09,870
So, again going back,

163
00:14:09,870 --> 00:14:11,675
there are steps that we did.

164
00:14:11,675 --> 00:14:17,460
We first used require to include all their gulp plugins there,

165
00:14:17,460 --> 00:14:22,575
then we configured the sass task,

166
00:14:22,575 --> 00:14:25,455
and then specified sass watch task.

167
00:14:25,455 --> 00:14:31,995
This is where we use the gulp watch that is available to us like from gulp.

168
00:14:31,995 --> 00:14:37,290
Then we specified the browser sync task and then finally

169
00:14:37,290 --> 00:14:43,150
reschedule the default task with the browser Sync and the gulp start with sass watch.

170
00:14:43,150 --> 00:14:45,705
Now, let's see the changes,

171
00:14:45,705 --> 00:14:49,875
and then we'll go ahead and execute the gulp file add,

172
00:14:49,875 --> 00:14:52,255
and the prompt type gulp.

173
00:14:52,255 --> 00:14:59,780
You will see that gulp starts up with browser sync and the sass watch task starting up,

174
00:14:59,780 --> 00:15:06,565
and then your browser sync will start serving up the files.

175
00:15:06,565 --> 00:15:12,770
If you view your website using a browser,

176
00:15:12,770 --> 00:15:17,425
you will be able to see the website being served up in the browser.

177
00:15:17,425 --> 00:15:23,090
Let me also illustrate the functioning of the watch task.

178
00:15:23,090 --> 00:15:26,795
So, I will pull up the style.css and

179
00:15:26,795 --> 00:15:31,185
just try to save the change and you will notice that on the left side,

180
00:15:31,185 --> 00:15:36,850
the sass task is immediately invoked and it

181
00:15:36,850 --> 00:15:44,460
will recompile the style.scss file into the CSS files.

182
00:15:44,460 --> 00:15:48,840
And then that browser will reload at this point.

183
00:15:48,840 --> 00:15:54,085
With this we complete the first part of the gulp exercise.

184
00:15:54,085 --> 00:15:58,710
In the second part, we will prepare the distribution folder.

185
00:15:58,710 --> 00:16:05,030
This is a good time for you to do a git-commit with the message Gulp part 1.