We can also use Grunt to set up tasks to be run when we change and save a file. These type of tasks are called watches. Let’s go ahead and take a look at our exercise files. In our exercise files under Chapter 11, Lesson Four, in the start folder, we have the application that we’ve been working on.
So let’s go ahead and navigate to the terminal and we want to get started by installing the grunt-contrib-watch plugin. So we can run “npm install “grunt-contrib-watch,” and I’m also going to save this to my dev dependencies.
Once we have the grunt-contrib-watch installed, we also may want to make sure that our dependencies are installed. In this exercise folder, I didn’t originally have the node modules folder, so it’s never a bad idea to run an “npm install.” And now that we have everything installed, we’re going to be ready to add our grunt watches.
So let’s navigate to our exercise files and let’s find our Grunt file in the root of our project. Open up “Gruntfile.js” in your IDE. So we’re going to add another node to our Grunt configuration. We’re going to add a node for our grunt watch task.
So I’ll create a node for scripts as well. Now, in both of these watch nodes, we actually have to tell Grunt which files it should watch. So, in my CSS node, I want to watch all of the less files, and if any changes occur on any less file, which is a file in the less folder with a less extension, I want Grunt to run this set of tasks. And we actually only want to run one task: the CSS task. So if we make any changes to our less files, Grunt will run the CSS task, and the CSS task is defined down here on line 48.
Now, we’re not going to register any task, because we’re just going to run grunt watch directly. So any of these tasks that we have configured up here, we can run directly with Grunt as well, so we’re just going to run a grunt watch. So let’s go ahead and save this file, and let’s navigate to our terminal. From the terminal, the first thing that we’re going to do is run a grunt once, just to make sure that our client files are getting generated, and the next thing that we’re going to do is start our application. So we can do that by running the app file. I’m going to “node app,” and we see that we have an Express app running on port 3000.
I’m going to go ahead and reduce this terminal window here and open up a browser window. We’ll reduce that as well so that we can see both at the same time, and navigate to localhost 3000. So here we see our Skier Dictionary running. So I’m about to work with the Skier Dictionary. What I’m going to do to improve my workflow is run the grunt watch task. So I’m going to need another terminal tab to do that. I’m going to go over to my terminal and go to Shell, and I’m going to select New Tab.
We’ll create a new tab with the same settings and, in this tab, I’m going to go ahead and run the grunt watch. Now, Grunt watch is an ongoing process, so it’s going to run, and while it’s running, it’s actually watching my files for any changes. So this means that, if I decide that I want to see everything over here as red instead of blue, I can make that change in my less file by changing a variable. Let’s go ahead and navigate to our files, and under the less folder, you will notice we have our style.less.
I’m going to go ahead and open up that file, and at the top we have our color variables set up. So I’m going to change the main color from navy to red, and the secondary color also from dark slate blue to red. And then, when I save this file, what happens is the grunt watch will watch the save, and as we can see here in the window, it saw that we saved a CSS file, and it automatically generated a style.CSS from our less file, and then the auto-prefixer task ran. So what that means is, without me having to really come back to the terminal, I can just go to the browser and hit refresh and see my new styles.