Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

    Grunt Watch

    John LindquistJohn Lindquist

    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.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson


    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.