This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Angular Automation: Gulp Watch

5:02 Angular 1.x lesson by

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 gulp-jshint to automation lint our JavaScript as we make changes to our code.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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 gulp-jshint to automation lint our JavaScript as we make changes to our code.

Avatar
Ben Franzoso

wheres the rest of the coarse???

Avatar
Steve

Just in case someone else experiences the same difficulty that I did; specifically an "UNMET PEER DEPENDENCY jshint@2.x".

from the Node.js command prompt I installed with the following...
npm install jshint gulp-jshint --save-dev

as described in https://www.npmjs.com/package/gulp-jshint and this seems to have addressed the problem.

Avatar
Paul

Hey Lukas, It would have been great to have had an uglify task included in this tutorial. That said, with what you've gone through, I'm hopeful I can put something together myself. Thx Paul

In reply to egghead.io
Avatar
wjen

Solved my issue thanks!

In reply to Steve
Avatar
pablo

I also expected more... as the title suggests, something more including Angular.

In reply to Ben Franzoso

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.

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.

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.

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.

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.

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?