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.