Angular Automation: Gulp Watch

[00:00] In this lesson, we are going to learn how to use gulp-watch to watch a specific set of files and then perform a task. As a bonus technique, we are also going to be using JSHint to lint our JavaScript as we work to catch any common errors that we tend to make when we get in a hurry.

[00:24] For instance, missing semicolons would be a good candidate and something that I frequently forget. Having JSHint running in the background linting my code is really, really handy.

[00:38] The first thing we're going to do is install the gulp-jshint package in PMI. Save dev. While that's installing, we'll go up here, and we'll make this available to our gulp file. I'm going to do one other thing really quick, because I know we're going to need it.

[01:11] I'm going to create a JS property on our app files object, and I'm going to point it to all of our JavaScript files within our source directory. Now that we've done that, I'm going to create a task called lint. We'll point it to our JS files, and we'll go ahead and pipe that into the JSHint package.

[01:59] From here, we'll pipe that into a reporter, which will then give us feedback on how we've done. We're going to go with the default reporter. Let's see if this works. We'll go "gulp lint." You can see here that I am, indeed, missing semicolons in this project.

[02:27] The problem is every time I make a change in my JavaScript, I would prefer not to have to stop, and go to the command line, and type "lint" or "gulp lint," rather. I would like for this just to run in the background and detect my changes and automatically lint my code as I'm typing.

[02:44] This is where gulp-watch comes into play. I'm going to create a new task, call it "watch." I'm going to call it "gulp.watch." I'm going to point it to my JS files, once again. When this is triggered or when a change is detected, I want it to call lint, and I want it to call the build task, as well.

[03:14] From here, let's run this one more time. Let's go into a file. We will go in the source directory, not in the build directory because we're not watching that. Let me go here and add a semicolon in. You can see now that it went through. It's still picking up the errors, but it did indeed run the lint task that we called for.

[03:47] Just for good measure, I see that I'm missing a semicolon there, and it runs. We can do one more thing here to make this even easier. In our default step, we can have the sequence be build, watch, and serve. Now, I no longer have to explicitly call out the "gulp.watch" task. I can go "gulp," and if I make a change here, just take this off, you can see that it ran again.

[04:25] We are using the "gulp.watch" task to watch a specific set of files. Then, when a change is detected, to execute a set of tasks. In this case, we're calling the lint task, which uses JSHint to detect possible common mistakes that we make in our code. Using gulp-watch, we can detect changes in our files and then kick off task.

[04:55] In this case, we're using JSHint to catch any kind of errors that we make in our code when we get in a hurry.