1.3 An Introduction to Grunt

Hello and welcome to lesson number two of this course, where I'll give you a very quick introduction to Grunt. As I was saying, in the end of the previous lesson, if you already know how to work with Grunts, then you can skip this lesson altogether, but if you don't, then stick around, I'll try to give you the basics so you can understand what we're working with here. Now Grunt is a JavaScript Task runner and the main reason you should use Grunt is automation. Grunt allows you to specify certain tasks that can be executed in succession and by doing that you simplify your workflow. So to give you an example, instead of using the different app to compile sass or less and then using a different app to do browser reloading, for example, and then maybe minifying JavaScript by hand, or concatenating JavaScript files, well all of these can be integrated in Grunt. They can be tied together, they can be defined as separate tasks and ran just by writing a single command in the terminal. And that's the power of Grunt, it allows you to automate certain tasks that you would have to do by hand, therefore saving you a lot of time. Now, Grunt can be installed via NPM. NPM stands for Node Package Manager, it's the package manager of Node.js. That's where you get Grunt and that's where you get the Grunt plugins, most importantly. Because Grunt is great by itself, but in order to create a good workflow you need a bunch of plugins. And a plugin is basically a set of tools that perform a specific task. For example, compiling less or concatenating files or copying files from one folder to another. That's a typical example of what a Grunt plugin can do. Now, I'm not gonna go over installing everything in this lesson. We'll do that in the next lesson, where we do all the file and folder preparation. But, for now, I just want to quickly show you a Grunt file, so you get an understanding of what's going on. So, for every Grunt project, you basically need two starting files. You need the package.json and you need the gruntfile.js. The package.json contains a list of dependencies for Grunt. In my case, I'm using Grunt, Grunt-bower and a whole bunch of other plugins. We'll go over these in a future lesson. The Grunt file.js contains your tasks in a nutshell. So to give you an example, this right here is a task. The sass task. This right here is the uglify task and these tasks have options you can define in various stages for each one, but this is where they're going. So let me say, for example, let me show you a very simple example. So look at this clean task. The clean task has a simple job to do, delete a file or a folder. In my case, I'm setting its source to dist.bits which, as you will see in a future lesson, this will take us to the the dist folder which currently is not yet created. But this is what it's doing and I can simply open terminal and I can type grunt space clean right and that will execute the clean task and it's gonna do all of this. Of course, some tasks are more complex. For example, the sass task. The sass task can have multiple stages, as I was saying, it can have a dev stage and it can have a build stage. In our case we have two stages. I kept saying stages but that's not actually correct, it's called target. Sorry about that. So a task can have multiple targets not stages. So dev is one of them, build is another, and I can specify these targets when I call Grunt. So I can say, for example, grunt, space, sass, and let me actually show you this in a terminal. I can say grunt sass and then followed by the target name, in my case dev or build. And that will execute whatever it is I have in that target. And that's a very simplistic look at Grunt. Of course it's more complicated than that but I only gave you enough to get you going for the next couple of lessons. If you want to learn more about grunt, then check out the lesson notes, where I've included some great resources for learning. Now in the next lesson, we're going to start creating our workflow and we'll begin by doing a little bit of preparation for files and folders. See ya there