Join Carrie Dils for an in-depth discussion in this video Configuring gruntfile.js, part of Responsive CSS Workflow with Sass, Bourbon, and Susy.
- [Instructor] At this point, we've got the components in place that we need to set up a workflow with Grunt. I know it feels like we've done a lot of set up just to get to this point, but it's totally worth it. So earlier, when we were analyzing workflow options, Grunt was just one choice of many, and of course the one that I wanted to show you in this course. But let's go back further and remember why we needed Grunt or any workflow for that matter. When we're dealing with Sass we're working with files that browsers don't understand. Browsers only know how to work with regular CSS, and we need a way to take Sass files and process them into CSS.
The downside to Grunt is that there's a lot of initial set up, but it is going to be worth it, because once that's done you don't have to do it again for that project. You can just sit back and enjoy the automation. So to get started working with Grunt we need to install Grunt CLI so that the Grunt command becomes available to us in our terminal. We've already installed node.js, so we can do the Grunt installation easily with this npm command that we've already seen. So we've got npm install -g grunt-cli.
And in this case, again, that -g means that we're going to install it globally. That means that if you do additional projects with Grunt down the road you won't have to do this step again. So, I'm going to go ahead and copy and paste this over into my terminal. We'll hit Enter. And it's going to give me an error, and the error is a permissions thing here, and it's telling me to run the command again as the root administrator. So on a Mac I'll just type sudo, paste that command in, oops, looks like it's not there.
And that's where we're going to define the tasks that we want to run. So if we look at the documentation here on the Grunt site, we can see that a Gruntfile has the following components. We've got a wrapper function, project and task configuration, loading Grunt plugins and tasks, and then any custom tasks that we want to define. So let's go ahead and get started creating our Gruntfile. We'll head back over to our project in our code editor.
And I'm going to save a file called gruntfile.js right there in my root directory. Clear that out. I'm going to go back to the documentation here and copy these and paste them into my file and sort of use them just as comments to help me go along as we get started here. So the first thing we're looking for is this wrapper function. If we go back to the documentation here, we can see that every single Gruntfile is going to use this and that all of our Grunt code must be specified inside this wrapper function, module.exports = function(grunt).
So I'm going to go ahead and copy that and we'll paste it into our project. And remember, everything in our Gruntfile has to be inside of this. So I'm going to go ahead and take these comments and put them in there. We can get rid of that one. Okay, so next step we've got this project and task configuration. Let's see what that involves. So here looking at this example code I see that the project configuration starts with this grunt.initConfig function.
So I'm going to go ahead and add that to my Gruntfile. Leave some space here to see what our next step is. And coming back to the documentation we can see this line called package, and then we're defining it as a grunt.file.readJSON and then this package.json file. And what that is is basically just imports the metadata from that package.json file into our Gruntfile.
Now in this case the package name is grunt-contrib-uglify, and that's not one that we've installed to use in our project at this point. But, I'm going to go ahead and copy this just to get the format and then we'll put it here. So in case you're wondering where this package name comes from, of course we were not using that package, but if we go back over to our package.json we can see that we've got grunt, grunt-contrib-watch, grunt-sass, etc. So I'll just go ahead and take this first one, grunt, and pop it in there.
So in order to get around that we're going to use something called this load-grunt-tasks. Now we've already actually got this installed, but let me show you how we use it. We'll go to the documentation for that, and here you can see sort of the before after. So before we've got all of these individual tasks that we're loading, and the after is simply to require that load-grunt-tasks and then you're specifying with this word grunt that you want to match that pattern. So whenever you have a package that begins with grunt, it's going to go ahead and import that, it's going to match that pattern.
Now we've already done the install earlier, so now I'm just going to go ahead and copy this. And instead of all of this in my gruntfile.js I can just use that one line and that will bring in all of my Grunt plugins. So the last thing that we want to do here in our Gruntfile to get the initial setup done is define some custom task, and the very first custom one we're going to do is just simply a default task.
Going back to the Grunt getting started documentation, if we look we can see that the syntax for that is grunt.registerTask. Then we've got default, the name of the task, and then whatever we want to run here at the command line. So for instance, whatever you define here if you type grunt into the command line it's going to run whatever you specify in this array. So I'm going to go ahead and copy that.
So again, I'm not using uglify in this project, so I'm going to delete that and just leave this as an empty array for now. We'll come back and fill in those tasks later, but for now I just want to get a valid Gruntfile. So let's go ahead and save that, and at this point if we come to the command line and simply run grunt I'll just see this confirmation message of done. Now, we haven't actually told grunt to do anything yet, but our outline for the Gruntfile is complete, and we can see that it's working because it's giving us this confirmation message.
In the next video, we'll take a look at actually configuring a task.
- Reviewing what Sass is and how it works
- Analyzing workflow options
- Setting up a folder structure
- Adding version control
- Working with package managers
- Setting up a workflow with Grunt
- Scaffolding HTML
- Modularizing a Sass with partials
- Creating a color palette with variables
- Using Font Awesome
- Creating a mobile-first layout