Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:11Length:1.6 hours
  • Overview
  • Transcript

5.2 Grunt

Grunt is a JavaScript task runner, and while it may not seem very useful at first glance, it is an extremely valuable tool. You’ll learn about Grunt and two Grunt plugins in this lesson.

Related Links

1 lesson, 00:40

Free Lesson

2.Code Editors
3 lessons, 23:10

Free Lesson
GitHub's Atom

Adobe's Brackets

Microsoft's Visual Studio

3.Runtime Environments
1 lesson, 10:41

Browser Development Tools

4.JavaScript Components
3 lessons, 39:01




5.Node Packages
2 lessons, 23:47

NPM and Browserify


1 lesson, 00:42


5.2 Grunt

Grunt is a JavaScript task runner, and I have to admit that the first time that I heard about Grunt, I just kind of pushed it aside, because I thought, well, what use is that? Until a couple of seconds later when I actually thought about it, and I realized, that would be really useful. Because if there's one thing that we do, especially whenever we deploy applications or updates to applications, it's run tasks. Like for example, if we are deploying JavaScript Files, we will need to run them through JS Hint. We also need to minify them. If we have a bunch of files that we need to concatenate into a single file, that's something else that we have to do. And Grunt makes it easy to do all of that, because it automates everything. Now, of course, we need to go through a certain configuration process, but once we have configured configured grunt, all we have to do is run the grunt command and it does everything for us. So, we're going to look at Grunt in this lesson. The website is gruntjs.com, but we don't download it from the website, we use the package manager to install it. So, let's look at the project that I have. Right now, it's just a simple folder that has a package.json file and it has all of the default information. I just ran NPM in it and took all of the defaults, and there we go. Then I have a folder called js-src. And it has the eventShim file. Now this is a normal JavaScript file, there's no minification or anything like that. So one thing we would want to use Grunt for would be to minify this file, and not just this file, but perhaps all of the JavaScript files inside of this js-source folder. The idea being that this is the source of all of our JavaScript stuff. So let's install Grunt. Let's go to the command line, and we want to NPM install, and we're going to install this globally with -g. And then the package is Grunt CLI. Now the great thing about Grunt is that we can have multiple versions of Grunt installed. We are installing it globally here, but we can also install it locally to a project. And Grunt is smart enough to recognize when there's a different version within a project, and it will use that version. So let's install this. And the first thing that we're going to do is run the grunt command. And you will see what exactly we get. So we'll type grunt and Enter. And we see that it is unable to find local grunt. And that's because we have to have what's called a grunt file inside of the project. This is essentially the configuration file. So let's create that file. I'm going to add a new JavaScript file to this project and it is simply called gruntfile.js. And grunt uses nodes require, to load this file. So we actually have to format this as a node module. But that's easy enough to do. All we have to do is module.exports = function, and we want grunt as our parameter, although it doesn't have to be grunt, it can be anything, but grunt is the convention. And then inside of this function, we have our configuration. And the first thing we're going to do is register a custom task. And to register a task, it doesn't matter if it's custom or not, we use Grunt register task method, and the first thing we pass is the name of the task. Now default, allows us to just call the grunt command so at the command line we could just do grunt, and that would be it. But if we gave it some other name, like task1, then we would have to include that task name whenever we called the Grunt command from the command line. But since this is default, we don't have to worry about that. The second argument is the description. Which we are going to just log stuff to the console. So "log stuff", that's going to be a good enough description. And then we need our actual task, which is going to be a function. And all we are going to do, is write something to the console. So to do that we use grunt.log.write and then write something. Now, this second argument that we pass is going to be different later on, because we will use the register task method, once again, to register some other tasks. But for now, this is going to be fine. So let's save this, let's go back to the command line, and let's run grunt. And we get the same thing, unable to find local grunt. [LAUGH] And, oh boy. The reason being, because I forget to install Grunt. We installed the command line interface, but we didn't install Grunt itself. So we need to NPM install grunt, and we will save. And that's going to give us everything [LAUGH] that we need to run Grunt. That should have been the first thing that I did but, oh well. So now, if I run Grunt, we're going to see the data that we wrote to the console. Write something. And that's great and all, but let's do something that's actually useful. So I'm going to comment this code out, just for the sake of the code for this lesson. So that that will be in there. And we are going to minify The event shim file. To do that, we're going to use a plugin called uglify. So, the first thing we need to do, is install that uglify grunt plugin. This is a node package, so we're going to use NPM. We want to install grunt-contrib-uglify, and we will save that as well, that's going to pull that into our project. And if we look at our package.json file, we now have some dependencies. We have grunt, and then we have grunt-contrib-uglify. So now inside of our grunt file, we need to actually configure the uglify plugin. So to do that, we use the initConfig method. And we pass this an object that has all of the configuration for the tasks that we want to run. So in this case we want uglify, which is another object. And we will come back to this here in a moment. The next thing we need to do is load the grunt contrib uglify plugin. So we use load npm tasks and then we pass in the name of that plugin. So contrib, and uglify, and then we need to register this task. So we're going to use the register task method, once again. We're going to call this the default task, but instead of passing a description, which we could pass a description if we wanted to, instead, we're going to pass a list of tasks. And in this case, it is uglify, and Grunt is going to execute the tasks that we specify, in order that they appear within this array. So uglify, of course, is our only element, but whenever we add another task, if we have one before it, then it's going to run that task first. And then it will run uglify, or, if we have another task after uglify, it's going to run uglify and then that other task. So the order in which you specify the tasks within this task list is important. And now we need to configure our uglify task. So we're going to have another object called build, although this object can be called anything that we want, I'm just going to call it build. And we want to uglify or minify, the event shim. So one thing that we could do is specify the source as js-source, and then eventshim.js, and then we can specify the destination with the dest property. And in this case, the destination is just going to be js, and then eventShim.min.js. So let's save this, let's go back to the console, and let's run grunt. We see that one file was created, and it was done without any errors. And we can see in our folder structure that now we have this js folder. We have the eventShim minified file, and if we look at it, there it is minified. But, as I said earlier, it would be more useful to minify all of the JavaScript files inside of js-source. So let's go back to the grunt file, and let's change this configuration. We're going to use a property called expand and we're going to set it to true, because this is going to allow us to use some extra properties to work with files dynamically. The next thing I'm going to change is the source property. Instead of specifying an actual file, I'm going to use the wild card of the asterisks, so this is going to pull in all of the JavaScript files in js-source, and for the destination we just want to specify the folder, so js, and we can also use another property called ext, for the extension. So let's delete this js folder. And let's run grunt once again. So this is going to generate the file. If we go back, we have our js folder. But here we have the js-source folder. And while it did minify this file, this isn't very useful. Because we want all of the minified files to be directly inside of the js folder, as opposed to this sub folder. So we can do that by adding another option to our configuration. So let's delete this JS folder, once again, and we're going to add a property called CWD. And this is what is essentially the base folder, so when grunt is looking inside of js-source, it's going to find all of the files that have an extension of js. So, the source Is relative to this, and then that's going to solve that nesting folder problem. So, let's save this, let's go back to the console, let's run grunt, and it's going to generate that file, once again, it created the JS folder, but now we have just eventshim.min.js. Now let's add a little bit of complexity here. And let's use browserify as well. So let's add a couple of files. Actually, we're just going to add one file. It's going to be at the root of our project and I'm going to call this main.js. And this is going to be a lot like what we had in the previous lesson. Where we are going to require jQuery, so we're going to need to install the jQuery package. And then we're going to document body, and then append and, hello world. Now, we're not going to run this in the browser, but we are going to use grunt. To use browserify to browserify this, and generate another JavaScript File that's going to go inside of js-source. And then that is going to be minified and put inside of js. So, first of all, we need to install some packages. So NPM, install jQuery. And, we want to save. We also want to install browserify. And in order to use browserify with grunt, we're going to need to install the plugin for grunt. So, install, the name is grunt-browserify, although we do need NPM here, so NPM install, grunt-browserify, and save. And then let's go back to our grunt file, and we need to add a task for browserify, so this is another object in our configuration and this is going to contain another object that I'll call dist, for distribution. I guess I could call this other for uglify dist as well. And the browserfly plugin has an option called files. This is an object where the properties are the output file names, and then the values for those properties are the files that browserify is going to browserify. So in this case, we want to save this output file into js-source. And we can call this app.js, and then the value is main.js. And then we need to import that plugin. So grunt.load, NPM tasks, and then we want grunt-browserify. And then we need to add the task to our default task. Now, we need to run Browserify before we run Uglify, because we need to create this app.js file before we minify it. So we're going to add the Browserify task before uglify, in this task list, and that should be everything. So, let's go to the command line, let's run grunt, and we have an error. It's on line 19 and we have an unexpected parentheses. So on line 19, I need to add another curly brace here. So let's save that, let's run grunt once again. Hopefully everything will work fine. It does. We can see that's two files were created. If we look inside of js-src we have app.js, which is not minified. But if we look at the js folder, once again we have eventShim, which is minified, and then we have appmin.js which is minified as well. And you know what? Let's go ahead and let's create an HTML file. And include the app.js file. We don't have to worry about eventShim because I don't have IE8 or anything like that. So let's just call this index HTML. Yes, and then let's add some HTML to this HTML file. And then let's run this in the browser and we should see the content being written to the page. So Grunt is an extremely useful tool and we just looked at two of the plugins available for grunt. There are a ton of plugins. In fact, the hard part is finding the plugin that you need. But once you configure your tasks, you are good to go. Just run the grunt command, and that's it.

Back to the top