A colleague recently asked me to give him a high-level overview on how to get started using these fancy front-end build tools everyone’s talking about. Since I’m a team player, I thought it would be best to share my advice with all of you as well!
First, what the heck am I talking about? What are “front-end build tools”? Simply put, there is a community of people and a whole bunch of services out there who just want to make it easier for front-end developers to build projects. Their motivation? Why go through the hubbub of setting up your working directory structure, downloading the plugins and libraries you need, writing scripts for minification, etc., when all of that can be automated? Enter the realm of build tools.
Now that you know what they do, how do you use them? I fully support the idea of learning by doing, so my job here is to introduce you to your new friends, and let you guys get to know each other on your own time. Have fun!
Node.js – https://nodejs.org/
First things first is Node.js. Node is the foundation for any front-end build tooling you want to do. Many, many blog posts could be written on what Node can do, but for our purposes, it’s a means to use NPM (Node Package Manager) which you’ll use to install all the other things.
Grunt – http://gruntjs.com/getting-started
Grunt is a task runner that lets you automate a lot of your development process (minifying scripts, compiling SASS, watching for changes to files and reloading your page for you, etc). There is an alternate tool called Gulp that is gaining traction, but I still find that Grunt’s community is larger and better supported.
Bower – http://bower.io/
Another package manager that will download any assets you want / need for your particular project. Most build tool generators will use Bower to get you set up.
Yeoman – http://yeoman.io/
Yeoman let’s you skip learning all the intricacies of building a Node / Grunt project from scratch and just use a build tool someone else already wrote. Install Yo, then head over to the generators page (http://yeoman.io/generators/) to find one tailored to what your project needs are.
The appeal of build tools is that they should make your development process easier. Yeoman and Bower make setting up your project at the start quicker, and Grunt makes your dev process easier throughout the life of your project. You’ll excel if you really dive into Grunt and learn all that it can help you do. No task is too trivial!
And that about wraps it up. Get out there and start automating!
