This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Grunt Watch

3:03 JavaScript lesson by

In this lesson John will show you how to get started with grunt-contrib-watch. Watch is an essential component of any Grunt build, and you will find yourself using it in almost every project.


egghead.io comment guidelines

Avatar
egghead.io

In this lesson John will show you how to get started with grunt-contrib-watch. Watch is an essential component of any Grunt build, and you will find yourself using it in almost every project.

Avatar
Keri

Unfortunately a couple of steps were skipped in this and the first tutorial that cause issues here. In order to make it work, I needed to use npm-init to create a basic package.json file and then installed watch with npm install grunt-contrib-watch --save-dev which adds it to the package.json file, and creates the nodemodules directory and puts grunt-contrib-watch inside of it. The author seems to magically have the nodemodules folder from the beginning without showing how it got there.

In reply to egghead.io
Avatar
Joel

It would get boring and repetitive quickly if every Grunt video started with npm init ;)

https://egghead.io/lessons/nodejs-npm-init

In reply to Keri

John Lindquist: I want Grunt to encourage me every time I update my empty journal over here, so I'm going to register a Grunt task called Pat for pat yourself on the back. We'll have Grunt log right line. We'll just say, "Keep going, you're great."

You've probably seen how you can do a Grunt watch. If I try and do this now, you'll see that the watch task wasn't found. What I need to do is, I need to Npm install grunt-contrib-watch. We'll talk about contrib in later tutorials. Just know that watch is one of the packages inside of contrib.

Once I have contrib, I can try running Grunt watch again, but watch still isn't found. That's because I need to actually load the grunt load Npm tasks. You can see that grunt-contrib-watch is in my node modules. I want to load in grunt-contrib-watch.

Now that I have this loaded in, if I run it, you can see it's trying really hard to find a config property called watch. In my grunt.initConfig, I need to set up my watch properties. We'll say watch and we'll give it a list of files to watch. The file are journal, it's journal.txt, and we'll give it a list of tasks to run when that file is updated. We want to run Pat.

Now, if I run this, let's clear this out and we'll say Grunt watch. It's running the watch task so that anytime I update this, let's say today, "I chewed gum," and hit "Save."

You can see that it's congratulating me, saying, "Keep going, you're doing great."

"Today I also woke up." That's a pretty good accomplishment. Let's say, "I brushed my teeth." You can see that it's doing exactly what we wanted it to do. Every time I update this journal file and hit "Save," it's going to run the task that I assigned to my watcher.

Basically, just to recap here, you install the grunt-contrib-watch, which is actually included in grunt-contrib if you install that. You need to load it as an Npm task and then it's available to just do grunt watch. You need to configure it so that, you configure the files you want it to watch, and the tasks you want it to run.

There's a lot more things to configure and many more ways of setting this up which we'll probably cover in future tutorials.

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