The Grunt command line interface. Install this globally and you'll have access to the Note: The job of the See the Getting Started guide for more information. To enable tab auto-completion for Grunt, add one of the following lines to your # Zsh, ~/.zshrc eval "$(grunt --completion=zsh)" Installing grunt-cli locallyIf you prefer the idiomatic Node.js method to get started with a project ( To read more about npm scripts, please visit the npm docs: https://docs.npmjs.com/misc/scripts. You've probably heard of Grunt, the JavaScript task runner that runs on Node.js. Maybe you've tried to get it up and running, but got lost or confused during setup. Maybe you know of it, but aren't sure how it can be useful or if it's worth the time invested. I'm going to show you how Grunt can be useful, and I'm not going to throw command lines at you and assume what you might already have installed. I'll let you know exactly what you need to install, and in what order, to start optimizing your workflow. Prerequisities
If you think you can follow along without reading that, here are the most important commands, and all you need to know to get started.
Goals
What is a task runner?Grunt and Gulp are currently the two most popular JavaScript task runners. The purpose of a task runner is to automate all your processes so you don't have to think about them. For us, this is going to be compiling our CSS preprocessor - Sass in this case, but the steps are the same for LESS - apply vendor prefixes for cross-browser compatibility, and minify the CSS for speed. We'll also be minifying JavaScript. What is Node.js?JavaScript is, and has always been, a client-side programming language, which means it's processed by the browser. With the advent of Node.js, JavaScript can also be used as a server-side language. Grunt runs in this environment. How about npm?Ah,
npm - Node Pacakage Manager. Don't let this be a source of confusion for you. Npm is just the package manager for Node.js, which just means it's the tool to connect to the giant repository containing all the Node.js programs, plugins, modules and so on. Use the
Local vs. GlobalThere has to be a local and global version of npm - it's just the way it is. Don't fight it. What does that mean? It means we're going to install Grunt CLI globally - so I can run grunt in the command line at any time - and all the plugins and packages will go into local installs. If I'm working on mypersonalblog.com and clientwebsite.com, they both need their own npm install. I'm sorry. This is not a simple concept to understand at first. I certainly didn't. The command for local npm is InstallationHere are all the steps to get everything up and running. Install RubySass runs on Ruby, so we need to have that installed. The Ruby programming language is already preinstalled on OSX. You can check this by opening Terminal and typing
Install SassYou can also run
Install XCodeXCode is a free download from the app store. You can check if you have XCode installed already by typing Install HomebrewHomebrew is a useful program for installing other programs. So meta. Type this into the command line.
Follow the steps - you'll have to
agree to installing brew and enter your password. You can type Install Node.jsWe're going to use Homebrew to install Node.js. Install Grunt CLI globallyFinally, we can install Grunt. We're not actually installing Grunt, but the Grunt command line interface (CLI). This basically just allows your computer to recognize the Here's the good news: everything you just did, you won't have to do again. Node.js is installed, Homebrew, XCode, Sass, Ruby. Maybe you'll have to update them every now and then, but the point is that you have them. This is going to help with a lot of installations in the future. Everything from here on out is going to have to be done on a project-by-project basis. Create package.json in a local directoryAlright, now we start learning the Grunt and npm specifics. Any project that runs on Node.js requires a package.json. If you've never seen or used a JSON (JavaScript Object Notation) file before, don't be too concerned. It's basically JavaScript. There's a lot to know about package.json, but you can figure that out as you go along. Go to your local directory. Mine is Create a file and save it as package.json.
The first several entries are self-explanatory.
The packages we're installing:
So, what if I created my package.json and installed npm but forgot to include postcss? Or decide later I want to add a new plugin to my project? No problem. This will be the code.
Create a local npm install in a local directoryNow you'll create your local npm install, which will create a folder called
This might come up, which doesn't matter. Grunt wants you to have a README.md and a repository set. You can choose to create one and add it to your package.json, but it's not required. Here's the code for that.
Terminal will go through and install all the plugins, and then you'll have your node_modules folder all set and ready to go. Creating your GruntfileEverything that Grunt will do is to be defined by you in Gruntfile.js. This will be the final step in your Grunt process. There are four parts: loading grunt, defining your tasks, loading the plugins, and registering the tasks. Load GruntFirst, load Grunt. You don't even have to think about this one; just paste it at the top.
TasksTasks come next. We'll get to the tasks after I explain the rest of the basic setup. Load Grunt PluginsWith the loadNpmTasks functions, we'll be loading in all the plugins we installed earlier with package.json. I won't load the PostCSS add-ons here, as they go in the individual task.
Register Grunt tasksFinally, register your task. The
Here is your compiled
Project SetupThe project setup is going to be very simple. We just want to make sure it works. The specifics can come later. I'm just going to make an index.html that links to css/style.min.css and js/script.min.js. I'm going to make two Sass files to compile into one minified CSS file, and minify my script.js as well. Here's the directory setup.
Any Sass file (which has a .scss extension) is valid CSS, you're good to go here even if you don't know any Sass yet. The Sass Guide is a great introduction. In my sass directory, I'm going to make these two files. sass/_base.scss - setting variables.
sass/style.scss - importing variables and setting styles.
src/script.js - alert on button click.
index.html - putting it all together.
Grunt TasksWe're going to set up all the tasks. Anytime you see an asterisk, it means "apply to any file" in that directory. SassI'm going to tell the Sass plugin to take any file in the sass directory, and compile it into the same named file in the css directory. I'm turning off the "sourcemap" option, because I don't need it.
PostCSSI'm going to pull in autoprefixer to add vendor prefixes and minify my CSS. I'm also turning off the maps here.
CSSMinCSSMin to minify CSS files.
UglifyJSUglifyJS to minify JavaScript files.
WatchHere's the most important task of all (in my opinion) - the watch task. Everything that I've previously told Grunt to do, I will now stick into a single command. When I run this command, Grunt will watch for any file changes and apply all the plugins.
Here's your completed Gruntfile.js.
Run grunt commandIn the root of your directory, run this command in Terminal. You'll get this response.
Now save a file in your sass directory.
And save the JavaScript file in your src directory.
That was a lot of steps. No wonder you didn't want to do this before. I've set up a GitHub repository of the project for you to play with.
|