Getting gulp set up with your angular project

Day four of “Try and write something every day for a week”


Today, we look at setting up gulp for angular projects. I’m a big advocate of gulp. But for those in camp grunt, you can achieve the same results no doubt. The same conceptual task runner workflow will apply to whichever is your task runner of choice.

If you are not using a task runner in your front end projects, I urge you to do so. You will wonder how you ever got by without one.


For those in camp TL;DR who just want some code to play with. Go HERE!


Why is an angular project any different?

You may ask what is the difference between setting up gulp normally for a project and setting up gulp for an angular project. For the most part, there is no difference. You will set up the same watches for compiling stylesheets, scripts etc.

However, angular projects introduce the use of ngmin and the $templateCache, two tools that I deem to essential for angular projects.

If you haven’t used either of these before; ngmin is a pre-minifier for your javascript so that you can safely use tools like uglify with your angular code. The $templateCache in brief is a way to take all the mark up for templates (views and directives markup) and package them into a service that can be used by your angular application. This means that you can bundle all of your angular application into one file and negate the need for individual requests for markup files.

How does this impact our gulpfile?

We need to think a little bit differently about how our gulpfile works and make use of task dependency.

ngmin

To factor in ngmin simply requires piping its use in before we use uglify. This isn’t difficult.

$templateCache

To factor in the $templateCache requires thought to how and when our javascript is handled by our task runner (In my example repo, I am using CoffeeScript and Jade. But you could simply swap these out for Javascript and HTML and watch those file types instead.)

I prefer to concatenate my script files into one file with my task runner so normally we need to watch our scripts and upon change create our one concatenated application script file — let’s say “app.js”.

However, introducing the $templateCache means we need to also watch the markup files for our templates and then compile our scripts as they now become part of our script.

1. Watch scripts
2. Watch markup
3. On either a change to markup or script, package our script file

We create a task that will watch our template specific markup and not general document markup.

gulp.task(‘templates:watch’, function(event) {
watch({glob: [sources.views, sources.templates]}, [‘coffee:compile’]);
});

In my case, the trigger on change is to compile CoffeeScript files.

The gulp task for handling our scripts becomes a little trickier

gulp.task(‘coffee:compile’, [‘templates:compile’], function(event) {
var coffeeFilter = filter(‘**/*.coffee’);
return gulp.src(sources.coffee.concat([destinations.templates + ‘**/*.*’]))
.pipe(plumber())
.pipe(coffeeFilter)
.pipe(concat(‘app.coffee’))
.pipe(coffee({
bare: true
}))
.pipe(coffeeFilter.restore())
.pipe(order([
‘**/app.js’,
‘**/templates.js’
]))
.pipe(concat(‘app.js’))
.pipe(wrap({
header: '(function(){',
footer: '}());'
}))
.pipe(gulp.dest(destinations.js))
.pipe(rename({
suffix: ‘.min’
}))
.pipe(ngmin())
.pipe(uglify())
.pipe(gulp.dest(destinations.js));
});

If you are not using CoffeeScript then some of this task won’t be applicable.

You will see that we have a dependency on a ‘templates:compile’ task. This task will handle taking our markup and outputting a ‘template.js’ file in a defined directory (For me, I have used ‘tmp’).

Our script task concatenates our scripts, then orders the source for the stream, concatenates our app.js with the generated $templateCache file — templates.js, wraps that in a safety function, prepares it for minification, minifies it and then outputs both version to our defined location.


It’s quite a mouthful to explain what is going on in the task and I’d advise checking out the code I’ve put together if optimising gulp for angular is something you are interested in.

Hopefully, this can help you out and if not feel free to suggest what could be worded different or what you think I should elaborate on. Leave a note or tweet me @_jh3y

Be sure to check out the code for the example also at the repo.

Show your support

Clapping shows how much you appreciated Jhey Tompkins’s story.