The build and sample app are also available in this Github repository.
In the next following sections we will go over a proposed toolchain for Angular projects, and walk through the Gulp build that provides those features.

The limitations of plain CSS are plenty and make it hard to write maintainable stylesheets. Although new CSS3 standards are addressing many of the limitations, widespread adoption takes time.

All these features are provided by the multiple CSS pre-processors available today, the difficulty being how to choose one. The two main ones are Sass and Less.

gulp.task('build-css', ['clean'], function() {
    return gulp.src('./styles/*')
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(cachebust.resources())
        .pipe(sourcemaps.write('./maps'))
        .pipe(gulp.dest('./dist'));
});

But the industry is very fragmented in what concerns module systems: there is requireJs, CommonJs, browserify, ES6 modules to name but a few. So which one to choose?

var express = require('express');

Recently in the Angular release 1.3.14 instantaneous-browserification the Angular team added improved support for browserify.

Namely it published in npm all Angular files as CommonJs modules, giving them meaningful exports that allow for simplified browserify usage.

Although ES6 modules will be the solution of choice for Angular 2, it seems that browserify is the recommended solution for Angular 1 projects.

gulp.task('build-js', ['clean'], function() {
    var b = browserify({
        entries: './js/app.js',
        debug: true,
        paths: ['./js/controllers', './js/services', './js/directives'],
        transform: [ngAnnotate]
    });

    return b.bundle()
        .pipe(source('bundle.js'))
        .pipe(buffer())
        .pipe(cachebust.resources())
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(uglify())
        .on('error', gutil.log)
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('./dist/js/'));
});

Note that browserify is used directly and not via some plugin like gulp-browserify. This is because the gulp team has blacklisted several plugins such as gulp-browserify, as they make for separate build processes that are hard to integrate well with other gulp plugins.

Instead the gulp team provided a recipe of how to use browserify: we simply call it directly, and pipe its output which includes the concatenated js files wrapped in modules and stream it to other gulp tasks.

angular.factory('todoStorage', function ($http, ) { ...

a.factory('todoStorage', function (h, ) { ...

The problem is that the variable name $http is lost, so Angular can no longer inject it by finding the $httpProvider that it identifies by concatenating the variable name $http with Provider. This causes the application to break if minified.

angular.factory('todoStorage', ['$http', function ($http, ) { ... } ]

var ngAnnotate = require('browserify-ngannotate');

Another Angular-specific problem that a build needs to solve is to pre-populate the Angular template cache.

If we don’t do this, then every template of every directive will result in a separate HTTP request, resulting in an unacceptably slow application startup time, as the application needs to wait for the templates to be loaded before rendering the page.

One way to reduce the number of HTTP requests related to images is to group them together in an image sprite, and load only that. The following section of the build uses the gulp.spritesmith plugin to generate sprites:

gulp.task('sprite', function () {

    var spriteData = gulp.src('./images/*.png')
        .pipe(spritesmith({
            imgName: 'todo-sprite.png',
            cssName: '_todo-sprite.scss',
            algorithm: 'top-down',
            padding: 5
        }));

    spriteData.css.pipe(gulp.dest('./dist'));
    spriteData.img.pipe(gulp.dest('./dist'))
});

All the png images inside the images folder get converted into one single todo-sprite.png file. In order to be able to use the sprites, a Sass mixin is generated in file _todo-sprite.scss. The mixin can be used in the following way:

@include sprites($spritesheet-sprites);

This will create a set of CSS classes with the same names as the image files, which allow to use the different images. For example the image cal-right-button.jpg could be used in the following way:

<span class="cal-right-button"></span>

A convenient practice that comes in handy in both development and production is to prevent the browser from keeping stale copies of the CSS / Javascript of the application.

This prevents customers from viewing a stale version of the application that no longer matches the Html, and avoids bug reports that are sometimes hard to link back to the presence of stale resources.

The most effective way to achieve cache busting is to append to each CSS/Javascript file a hash of its content. This way when the file changes, the file name also changes and the browser will load the latest version of the resource.

.pipe(cachebust.resources())

This call keeps track of the CSS and Javascript files that will need to have their names concatenated with the file hash. The actual replacement of the css file names is done in the build task, by calling cachebust.references():

gulp.task('build', [ 'clean', 'bower','build-css','build-template-cache', 'jshint', 'build-js'], function() {
    return gulp.src('index.html')
        .pipe(cachebust.references())
        .pipe(gulp.dest('dist'));
});

One of the de-facto Angular test tool is the Karma test runner, and one the most used testing frameworks with it is Jasmine. The following Gulp task allows to run Jasmine tests from the command line against a headless PhantomJs browser:

gulp.task('test', ['build-js'], function() {
    var testFiles = [
        './test/unit/*.js'
    ];

    return gulp.src(testFiles)
        .pipe(karma({
            configFile: 'karma.conf.js',
            action: 'run'
        }))
        .on('error', function(err) {
            console.log('karma tests failed: ' + err);
            throw err;
        });
});

JsHint is one of the most used Javascript linters. The following gulp task allows to integrate it in our build cycle:

gulp.task('jshint', function() {
    gulp.src('/js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

gulp.task('webserver', ['watch','build'], function() {
    gulp.src('.')
        .pipe(webserver({
            livereload: false,
            directoryListing: true,
            open: "<a href="http://localhost:8000/dist/index.html">http://localhost:8000/dist/index.html</a>"
        }));
});

With the Gulp task runner and its rich ecosystem of plugins, its possible to create a baseline Angular build with the most frequently used features that an Angular project will likelly need, and still keep the complexity of the build relativelly low.

Let us know your thoughts on the comments bellow, what does your Angular build look like?

Published at Codepedia.org with permission of Aleksey Novik – source What every Angular project likely needs – and a Gulp build to provide it from https://blog.jhades.org/