Grunt Watch

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet

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.

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.