In this lesson, we are going to learn how to use
gulp.watch to detect local file changes and execute additional Gulp tasks. To illustrate this concept, we are also going to hook up
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.
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.
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.
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.
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.
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.
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.
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.