Join Ray Villalobos for an in-depth discussion in this video Creating your first task, part of Responsive CSS with Sass and Compass.
In this chapter we're going to be working with Grunt JS which is a task manager. It helps you create an efficient work flow for your projects. There's going to be a lot of setup here, but every minute you spend getting this to work is going to make your life a lot easier later. So the first thing we need to do is install Grunt so that the Grunt command becomes available to us in our terminal. We've already installed NJS so we can do the Grunt installation easily with the NPM command, and it looks like this, NPM install minus G grunt dash CLI.
And we're going to do this, and sometimes you're going to get an error here, and that's okay. What it's telling you is that you should try running this command as an administrator. It means that the account that you're on doesn't have permissions to install Grunt globally, which is actually one of the things you specify right here. The minus g option says, hey install this for all the users in the system. So we need to run this as pseudo, so actually I'm going to hit the up arrow to get the previous command and select this and copy it.
That's a little bit easier, and I'm going hit down, and type in pseudo and the same command. Now when you hit Return it may ask you for the password for the machine that you're on so I'm going to type that in then it should go through and install just fine. Okay awesome. When that's done and I'm going to go ahead and clear this, I'm going to need to create a Grunt file dot JS document the Grunt CLI that we just installed is going to use this file to read and handle the tasks. So, I'm going to right-click on my folder and select New File and type in gruntfile.js and save this. Then I'm going to get rid of that text and the first thing we need to do in this file is to set up the module exports parameter as a function.
So, we'll type in module.exports, and it's going to be equal to function, Grunt and then curly brackets. Now there's going to be a lot of curly brackets here, so it's a good idea to put in some comments. So this is where all our Grunt commands are going to go. Now in order to get things working here, we're going to need to load the plugins that we added when we created the package.json file. So if you remember from this file we're adding several plugins including Grunt. And then other things like Grunt contrib-watch, compass, uglify and this thing called matchdep.
So we'll need to add those manually into our files. You do that by using a Grunt.load Npm. And you have to be careful here, because normally you would think Npm might be all capitals, but only the first N is capitalized here. Npm tasks. And then we just specify what we want to load. So in this case, we're going to start with the uglify plugin. So we'll say Grunt-contrib-uglify. All these plug-ins are going to have their own page and here's the one for Grunt contrib uglify.
So now that we have that plugin installed, we're going to go back into our page right here and start working with Grunt. So whenever you work with Grunt you have to initialize it. So, you say grunt.initConfig. And then we're going to create an object that gets passed along to that. So, once again I need to put a comment here, and I'll indent this a little bit. It's going to get rid of the extra space here, actually, this should be at the same level. So, just like that.
And, now we need to create our first task. So, this is going to be what we want Grunt to do once it runs. Our first task is going to to be the uglify task. So we'll type that in, uglify, and that gets passed along as object. Again comment if you can. Now here's where you'd pass it all the parameters that we want Grunt to take care of. So you get these from looking at the documentation, you can see some examples right here. So with uglify, we're going to setup an object called My Target Object and create a files object within that, so let's go ahead and type that in.
Now my original js file right now is empty, so I'm going to need to write something in here. So I'lll do function, test and we'll just type in here return, allow. And then we're going to go ahead and save this, make sure we save our Grunt file and now we can execute the Grunt uglify command. So we'll go back to our terminal and type in Grunt Uglify, the task that we just did and hit Return and it's telling you that it's created the files without errors thankfully, so if we go back into our script.js file.
If we go back into our Grunt file, we can ask Grunt to also process this new file by just typing in another element right here. You may notice this is an array so arrays usually have multiple elements and I could just grab this other one and paste it right here and say also trocess the file called other.js. So I'm going to save that and if I go back into my terminal. I'm just going to run that Grunt uglify task. And hit Return. And it process those files. So, I' m going to go back and I'm going to click on my script.JS.
And you'll notice that I have both of the functions right next to each other. So I was also able to combine them. Now if you want to, you can shorten that a little bit. By just telling Grunt to look for any file called something.js by using this asterisk right here. And then you don't have to specify every single file. So it's going to look in this folder for any file with an extension of js and there's two of them right here. And then execute this command. So that's a little bit of a shortcut. I'm going to save this. Let's go back here and hit the up arrow.
Process Grant uglify. It's going to run just fine. And our script file will be generated in the same way. So hopefully this simple example will start to show you the power of Grunt. And how it's going to help you organize and process a group of files. Now you're probably not just interested in processing files. What you really want is some automation, so we'll take a look at that next.
Need a refresher on Sass? Check out CSS with LESS and Sass with Joe Marini.
- What are Sass and Compass?
- Adding version control
- Setting up a workflow with Grunt.js
- Modularizing your Sass with partials
- Creating a color palette with variables
- Using Compass mixins
- Creating a mobile-first layout
- Creating media-query breakpoints with Susy
- Designing a responsive grid with Susy
Skill Level Intermediate
Q: I am having trouble with the "Modularing your Sass with partials" video. Does Susy still support the @include at-breakpoint() mixin?
<div>A: The new version of Susy (2.1.3) doesn't support the @include at-breakpoint() mixin. This course is written for version 1.0 of Susy; however, you can still use the Susy 1.0 syntax as long as you modify the include command. In the styles.scss file, change the line that says: </div><div> </div><div><span style="font-family: Courier;">@import "susy" </span></div><div> </div><div>to </div><div> </div><div><span style="font-family: Courier;">@import "susyone" </span></div><div> </div><div>And you should be able to use the older syntax. There's more information at <a target="_blank" href="http://susy.readthedocs.org/en/latest/susyone">http://susy.readthedocs.org/en/latest/susyone/</a>.</div><div> </div>