Learn nodejs, Rapid development with Grunt Watches

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.

What we would like to do is add grunt watches to this application, so that, if we make changes to any of the less files, our CSS style sheet is automatically exported to the public folder, CSS, style.CSS. Also, if we go ahead and change any client JavaScript files, that our JavaScript package is rebundled and then shipped to the client under public, js, bundle.js.

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’m going to scroll down here, right after I add the browserify node, I will add another comma, and add a node for the watch. So, in our grunt watch node is where we want to configure our watch task, and the two things that we want to do are, first, we want to watch our CSS files, so I will create a node for that, and the second thing that we want to do is we also want to watch our JavaScript files.

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.

So whenever we run the CSS task, we automatically generate CSS files from less files, and then we also automatically auto-prefix those files. So the next set of files that we want to watch are our client-side Java-Script files. So those include our app-client file, so we want to watch the app-client.js file, as well as anything in the library folder with a JavaScript extension. So if any of the library JavaScript files change, we also want to run a hint.

So if we change our JavaScript code, we want to see what JSHint has to say about it. And then the second thing we want to run is a browserify. So after we change any of our JavaScript files, we will run the JSHint, and then we will recreate that client bundle by running browserify. The last thing that we have to do in this Grunt file is load the grunt-contrib-watch plugin. So I’m going to come down here to line 47, I’ll put my cursor at the end and hit enter, and I’m going to go ahead and load another npm task: the “grunt-contrib-watch.” There we go.

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.

We can also do the same thing with our JavaScript files. So if I navigate to my exercise files and I make a change to, say, the app-client JavaScript file, I can go ahead and open that one up. So this is our client JavaScript file. What I’m going to do is I’m just going to add a “Hello World” alert when the document loads. So here at line 11, I’m going to drop my cursor, hit enter a few times, and now I will alert(“Hello World”). So I made a change to the JavaScript client file, and when I save that change, we have an error.

So this is what happens when we have a Grunt error. We see “Aborted due to warnings,” and the warning is “Task ‘hint’ not found,” so that’s telling me immediately that I probably should’ve called the jshint task and not to the hint task. So let’s go ahead and navigate to our files. Going to open up the Grunt file again, and where we watch our JavaScript files, I’m running the hint task. We don’t have a hint task, it’s actually called jshint, if you see here on line four. So I’m just going to add a js in front of that, and this should work, so now I’ll go ahead and save my Grunt file and I’m going to navigate back to the terminal.

Now, because I made a change to my Grunt configuration, I need to rerun my watch, so the grunt watch is an ongoing process. We can stop it with Ctrl C, just like we can stop a website. I’m going to go ahead and clear the terminal screen and then run “grunt watch” again, and then let’s go ahead and try to change that client JavaScript file again. So let’s go back to our files. This time I will say “Hello’s World,” just so we can add a change there, and we will save that.

And if we go back to our terminal, what we’re going to notice is grunt watch has picked up that change. It shows us that the app-client.js has changed, so it ran jshint, we have five files that are lint free, and then we are also running the browserify task and creating a new bundle. So if I go out to the browser window, without having to do anything, I can just hit refresh and we can see our client-side JavaScript change as well. Using grunt watches can greatly speed up your workflow when working with web-development projects.

Leave a Reply

Notify of