1
00:00:00,338 --> 00:00:04,522
When you add Gulp to your first project,
you're going to discover the beauty of

2
00:00:04,522 --> 00:00:07,838
implementing task management
in your development workflow.

3
00:00:07,838 --> 00:00:11,783
And the cornerstone of making
Gulp useful in development

4
00:00:11,783 --> 00:00:14,338
is Gulp's built-in watch method.

5
00:00:14,338 --> 00:00:19,113
The watch method, just like it sounds,
watches files for

6
00:00:19,113 --> 00:00:21,558
changes and then runs tasks.

7
00:00:21,558 --> 00:00:26,739
This is incredibly useful, it allows
you to write code and save files.

8
00:00:26,739 --> 00:00:31,416
You just work and Gulp compiles Sass,
creates source maps,

9
00:00:31,416 --> 00:00:35,918
refreshes your browser or
does any number of other tasks.

10
00:00:35,918 --> 00:00:39,617
Let's put Gulp to work for
us with the watch method.

11
00:00:39,617 --> 00:00:44,181
As always, feel free to follow along
by checking out the branch for

12
00:00:44,181 --> 00:00:47,619
this video on GitHub and
you can do that like this.

13
00:00:58,537 --> 00:01:04,478
Jumping over to my Gulp file, I'm gonna
create a new task called watchSass.

14
00:01:09,417 --> 00:01:14,721
Provide the name as the first
parameter in the task method and

15
00:01:14,721 --> 00:01:21,378
then I provide an anonymous function
as a call back in the second parameter.

16
00:01:21,378 --> 00:01:26,158
Now in the body of the function,
I'm going to add gulp.watch.

17
00:01:30,878 --> 00:01:36,080
Really quick, I wanna point out here that
I don't need to use a return statement.

18
00:01:37,250 --> 00:01:41,950
Without getting too detailed about it,
just remember that if other tasks

19
00:01:41,950 --> 00:01:47,420
don't depend on a given task, you don't
need to return anything from its callback.

20
00:01:47,420 --> 00:01:51,060
You can read more about this
in the teacher's notes.

21
00:01:51,060 --> 00:01:55,170
In the case of our watch task,
no other tasks depend on it, so

22
00:01:55,170 --> 00:01:57,068
we're fine not returning anything.

23
00:01:57,068 --> 00:02:00,330
In the gulp.watch method,

24
00:02:00,330 --> 00:02:04,520
I'm going to provide the file to
be watched as the first parameter.

25
00:02:05,640 --> 00:02:06,850
Now this is tricky,

26
00:02:06,850 --> 00:02:11,810
because we need to watch a bunch of
different files in our Sass folder.

27
00:02:11,810 --> 00:02:17,190
The compile Sass task only needs
the application.sass file to work.

28
00:02:17,190 --> 00:02:23,640
However, that Sass file imports a lot
of individual Sass files itself

29
00:02:25,220 --> 00:02:29,030
and those Sass files
import other Sass files.

30
00:02:30,420 --> 00:02:35,590
As we mentioned before, these are called
Sass partials and these partials

31
00:02:35,590 --> 00:02:40,390
are what you want to do the majority
of your editing or changing styles in.

32
00:02:40,390 --> 00:02:45,558
So long story short, Gulp has to watch for
changes across all of these files and

33
00:02:45,558 --> 00:02:48,938
I can tell Gulp about these
files in one of two ways.

34
00:02:48,938 --> 00:02:54,938
The first way would be to
provide In a ray of files.

35
00:02:54,938 --> 00:03:00,640
So in my array, I would go scss and

36
00:03:00,640 --> 00:03:06,551
then application.scss, scs and

37
00:03:06,551 --> 00:03:13,277
then I would go base/_base.scss and

38
00:03:13,277 --> 00:03:18,778
under score and then I'd add all

39
00:03:18,778 --> 00:03:24,108
my other dependencies, etc.

40
00:03:24,108 --> 00:03:27,686
You can see how tiring it's
going to get especially here,

41
00:03:27,686 --> 00:03:29,887
we have something like 12 files.

42
00:03:29,887 --> 00:03:34,688
This reason, Gulp has something
like a globbing pattern.

43
00:03:34,688 --> 00:03:38,788
A globbing pattern is simply a syntax for
matching the names of files.

44
00:03:38,788 --> 00:03:41,457
There's a lot you can do
with globbing patterns and

45
00:03:41,457 --> 00:03:45,378
you can check out the teachers notes for
some advanced globbing patterns.

46
00:03:45,378 --> 00:03:47,418
We'll use a simple one here.

47
00:03:56,078 --> 00:04:02,137
We'll use this pattern here,
which says, look in the Sass folder,

48
00:04:02,137 --> 00:04:08,938
look in all of its subdirectories and
look for any file with a Sass extension.

49
00:04:12,638 --> 00:04:16,638
Now we'll provide the task we
want to run when a file changes.

50
00:04:16,638 --> 00:04:23,258
CompileSass is going to be the only one,
but I still need to wrap it in an array.

51
00:04:28,557 --> 00:04:33,898
And actually, another way I can write
this is without the first array.

52
00:04:33,898 --> 00:04:39,298
It can be an array or the string,
if you're using a single globbing pattern.

53
00:04:39,298 --> 00:04:42,358
Now let's run gulp watchSass.

54
00:04:46,738 --> 00:04:48,097
Looks like it's running.

55
00:04:48,097 --> 00:04:53,598
So let's see what happens when I make
some changes to the source files.

56
00:04:53,598 --> 00:04:58,682
So we'll come in here and let's just

57
00:04:58,682 --> 00:05:04,918
change this color to red and
I'll save this.

58
00:05:04,918 --> 00:05:10,343
I can see that Gulp automatically
ran the compileSass task and

59
00:05:10,343 --> 00:05:14,419
just to prove a point,
let's do another one.

60
00:05:14,419 --> 00:05:20,521
We'll change this back and

61
00:05:20,521 --> 00:05:23,178
let's do.

62
00:05:23,178 --> 00:05:28,456
This main file here, we'll say, h1,

63
00:05:28,456 --> 00:05:33,891
font: 20 pixels, font size rather and

64
00:05:33,891 --> 00:05:38,552
then compileSass ran a few times for

65
00:05:38,552 --> 00:05:43,040
each time that changed files.

66
00:05:43,040 --> 00:05:46,110
The watch task is pretty incredible and

67
00:05:46,110 --> 00:05:50,560
even though it only takes a couple of
seconds to compile files manually or

68
00:05:50,560 --> 00:05:55,880
do any of the other tasks we've seen so
far, those seconds add up.

69
00:05:55,880 --> 00:06:00,460
Additionally, it can be really
easy to forget to run tasks and

70
00:06:00,460 --> 00:06:03,380
in the correct order when it
is not done automatically.

71
00:06:04,570 --> 00:06:08,270
In the long run,
task automation can be a huge timesaver.

72
00:06:09,280 --> 00:06:13,740
Next, let's check out some of the ways we
can think about implementing a task runner

73
00:06:13,740 --> 00:06:15,000
in a more general sense.