Experience Design

Take the Plunge. Get Up to Speed with Front-End Build Tools

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!
The Tool Trifecta

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

The Digital Essentials, Part 3
The Digital Essentials, Part 3

Developing a robust digital strategy is both a challenge and an opportunity. Part 3 of the Digital Essentials series explores five of the essential technology-driven experiences customers expect, which you may be missing or not fully utilizing.

Get the Guide

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!

About the Author

I'm a front-end developer working at Perficient Digital, and I'm passionate about HTML, CSS, and grilling chicken.

More from this Author

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe to the Weekly Blog Digest:

Sign Up
Categories