Writing Desk

Blog

Setting up web development with Bower and Gulp


Door in empty room

There are countless tools and methodologies for building a smooth and efficient web workflow.  Everyone has an opinion on what works best but the reality is it's a matter of what works best for YOU.  So here is how I setup for my new site builds using some great tools to make things easier for developing and maintaining.  This is not a perfect or all-encompassing walkthrough but hopefully it's a resource.  Here's an overview of what we're doing:

  • Setting up Homebrew to manage our node package and rbenv to control Ruby versions
  • Installing Node/npm inside of Homebrew to isolate it.
  • Installing Bower so that we can pull in all our project-specific libraries and keep them up-to-date easily.
  • Install Gulp for automating our SASS compiling and other cool things.

Step 1: Install a few tools

The first step is getting a few basic command line tools installed.  These instructions are targeted for Mac (my current platform) so adjust them as needed.  If you aren't comfortable with Terminal don't be intimidated.  The key thing to remember is the 'sudo' command is a super-user command so don't use it unless you know what you're doing and why.

Install Homebrew as a package manager.  Homebrew is a package manager for installing extras on your system in their own directory.  You could do everything below without Homebrew but it definitely makes updates to your extras and your system a less-buggy experience.

For Homebrew you'll need to have Command Line Tools for Xcode installed

xcode-select --install

The simplest homebrew install is done with:

brew install

Next we'll install rbenv to handle various Ruby versions.  rbenv lets us custom pick a Ruby version for each project.  This allows us to choose the appropriate version for the components being used.  Most of the time when starting, the latest release of Ruby is good to start with.  Ocassionally component updates will need a newer or older version of Ruby which makes this tool a lifesaver in those cases.  (Before using rbenv I lost countless days figuring out how to solve a conflict between the default ruby version and a ruby gem.)  Before installing rbenv read over the docs and follow the install instructions.

Step 2: Install our various packages

Now that we've got our foundation items in place let's install some development oriented tools for our workflow.

Install NPM with Homebrew.  npm is a javascript package manage and it's the basis for all the dev tools we'll be using.

In Terminal type:

brew install node

Type npm -v to check that npm installed correctly.  With npm installed we need to install Bower next.  The -g flag tells npm to install globally (without that it only installs to the current directory).

npm install -g bower

Bower is the package manager for all our front-end web goodies (Bourbon, Neat, Foundation, etc.).  For now we are only installing items.  Later we'll explore how Bower can ease your web development workflow.

Now lets' install Gulp.  Gulp is a compiler to automate compling the SASS files and the JS scripts in a project.  Let's install gulp globally along with a few other gulp tools.  Again we're installing globally.

npm install --g gulp gulp-concat gulp-uglify gulp-rename gulp-ruby-sass gulp-replace

Step 3a: Crank up a new project

Now that our key tools are in place it's time to get started with them.  In Terminal navigate to your new project directory.  And now things get fun!  If you are using a web framework or a script (i.e. jQuery Validation) keeping things up-to-date is going to get a lot easier.  Before using Bower you probably at least want to configure where installed components will be saved.  By default that location is 'bower_components/' but you can set the path to anything that works for you.  Create a .bowerrc file for the configuration.

touch .bowerrc

And add any configuration.  A simple start is:

{
  "directory": "src/components"
}

Now you're ready to install whatever components you need.  To search for a component simply use the command

bower search 

Installing components is done with

bower install 

The biggest power of Bower is the ease of updating your dev tools.  With a few simple commands you can update a specific item or everything.  No more downloading the latest copy of all those jQuery scripts and recompiling, minifying, etc.  The power of:

bower update

and all your dependencies are updated.  Take 30 minutes and do a little reading on Bower to find out all it can do for you.  You can also create your own packages with Bower for version control.  If you'll be sharing your project on a team this is definitely the way to go.  We'll talk about that next.

We also installed Gulp earlier to automate SASS compiling and getting everything ready for production (concat, minify, etc.).  Prior to using Gulp I used Codekit (and I'm still a fan of it).  But with needing to version label files and working with other devs who may not use it I switched to Gulp and haven't looked back.  Explore Gulp and using it for compiling and making things production ready.

Step 3b: Launch an existing project

If you've just gotten pulled into a new project and your seeing files like package.json, bower.json, gulpfile.js in the project root then the lead developer is using a workflow that's intended to be easy for you to join.  I'm going to assume you've pulled the project in locally from GIT or some other version control system.

So if you see a package.json file then the developer has created a package file already that lists all the dependencies the project requires.  From the project root in terminal execute

npm install

That should pull in any and all dependencies listed in package.json.  To get the front-end goodies that are being used is equally as easy.

bower install

That will install all the needed components listed in bower.json.

And...that's all.  Yes it's really that easy.  If Gulp is being used check the gulpfile.js file for what gulp commands to execute for compiling and whatever other gulp functions are available.