# Kickstarting Angular With Gulp and Browserify, Part 1 - Gulp and Bower

Let’s develop an Angular boilerplate. Why? Despite the plethora of Angular seeds/generators/templates/boilerplates/starters/etc. on Github, none of them will ever do exactly what you want unless you build your own, piece by piece. By designing your own, you will better understand each component as well as how each fits into the greater project. Stop fighting against a boilerplate that just doesn’t fit your needs and start from scratch. Keep it simple, as you learn the process.

In this first part, we’ll start with Angular and Gulp, getting a working project setup. Next time we’ll add Browserify into the mix.

This tutorial assumes you have Node.js installed and have working knowledge of NPM and Angular. Just want the code? Get it here.

## Project Setup

### Install Dependencies

#### Setup a project folder and create a package.json file:

The npm init command helps you create your project’s base configuration through an interactive prompt. Be sure to update the ‘entry point’ to ‘gulpfile.js’. You can just accept the defaults on the remaining prompts.

Do the same for Bower:

Accept all the defaults. After the file is created update the ignore list:

#### Bower install directory

You can specify where you want the dependencies (commonly known as bower components) installed to by adding a .bowerrc file and adding the following code:

#### Install local dependencies:

NPM

Bower

The --save flag adds the dependencies to the package.json and bower.json files, respectively.

We’ll address each of these dependencies shortly. For now, be sure you understand the project’s core dependencies:

• Gulp is a Javascript task runner, used to automate repetitive tasks (i.e., minifying, linting, testing, building, compiling) to simplify the build process.
• Bower manages front-end dependencies.

### Folder Structure

Let’s setup a base folder structure:

Add the files and folders not already included. This structure is based on the popular Angular Seed boilerplate, developed by the Angular team.

### Gulp

To start, we just need the following code:

This allows us to serve our future Angular app on a development server running on port 8888.

### Test

Let’s test it out. Add the word ‘hi’ to the index.html file, then run the following command:

Navigate to http://localhost:8888/ and you should see ‘hi’ staring back at you. Let’s build a quick sample app. Keep the server running…

## Develop a Sample App

### index.html

This should look familiar. The ng-app directive initiates an Angular app while ng-view sets the stage for routing.

### main.js

Again, this should be relatively straightforward. We setup the basic Angular code to establish a route handler along with a controller that passes the variable test to the template.

### partial1.html

Now let’s add the partial template:

### Test

Back in your browser, refresh the page. You should see the text:

## Create the Build

Now that our app is working locally, let’s modify our gulpfile.js to generate a deployable build. Kill the server.

What’s happening here?

1. gulp-jshint checks for code quality in the JS files. If there are any issues the build fails and all errors output to the console.
2. gulp-clean removes the entire build folder so that we start fresh every time we generate a new build.
3. gulp-uglify and gulp-minify-css minify JS and CSS, respectively.

### Build commands

Default

The default task, gulp, is a compound task that runs both the lint and connect tasks. Again, this just serves the files in the “app” folder on http://localhost:8888/.

Build

The build task creates a new directory called “dist”, runs the linter, minifies the CSS and JS files, and copies all the HTML files and Bower Components. You can then see what the final build looks like on http://localhost:9999/ before deployment. You should also run the clean task before you generate a build.

Test this out:

## Conclusion

Well, hopefully you now have a better understanding of how Gulp can greatly simply the build process, handling a number of repetitive tasks. Next time we’ll clean up some of the mess that the Bower components leave behind by adding Browserify into the mix and detail a nice workflow that you can use for all your Angular projects.

Leave questions and comments below. Cheers!