Build Configurations?

That's a lot of configuration!

A typical

app layout

Actual app files

Build tool

related

Configuration

files

Can we do better?

Declarative?

Let's go to a
restaurant

do you

make your 
own food?

Of course not!

Case study

GulpJs

gulp.task('clean', function(cb) {
  del(['build'], cb);
});

gulp.task('scripts', ['clean'], function() {
  return gulp.src(paths.scripts)
    .pipe(sourcemaps.init())
      .pipe(coffee())
      .pipe(uglify())
      .pipe(concat('all.min.js'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('build/js'));
});

gulp.task('images', ['clean'], function() {
  return gulp.src(paths.images)
    .pipe(imagemin({optimizationLevel: 5}))
    .pipe(gulp.dest('build/img'));
});

gulp.task('watch', function() {
  gulp.watch(paths.scripts, ['scripts']);
  gulp.watch(paths.images, ['images']);
});

gulp.task('default', ['watch', 'scripts', 'images']);

gulp.task('clean', function(cb) {
  del(['build'], cb);
});

gulp.task('scripts', ['clean'], function() {
  return gulp.src(paths.scripts)
    .pipe(sourcemaps.init())
      .pipe(coffee())
      .pipe(uglify())
      .pipe(concat('all.min.js'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('build/js'));
});

gulp.task('images', ['clean'], function() {
  return gulp.src(paths.images)
    .pipe(imagemin({optimizationLevel: 5}))
    .pipe(gulp.dest('build/img'));
});

gulp.task('watch', function() {
  gulp.watch(paths.scripts, ['scripts']);
  gulp.watch(paths.images, ['images']);
});

gulp.task('default', ['watch', 'scripts', 'images']);

We are telling Gulp everything!

How When What Where

Can we do better?

What about

maintenance?

Case study

sofa.io

Let's switch to Gulpjs!

Can we do better?

Yes, we can!

Angus, a declarative build tool

github.com/nickjanssen/angus

How?

Convention

Over 

Configuration

http://en.wikipedia.org/wiki/Convention_over_configuration

Installs globally

npm install -g angus

Actual app files

Taken care of by Angus

Taken care of by Angus

Common app structure

hello-world/
    bower_components/
    src/
        assets/
        style/
        core/
        index.html
    angus.config.js

Declarative configuration

{
    bower: {
        packages: [
            'angular',
            'threejs',
            'Keypress',
            'underscore@1.7.0',
            'angular-ui-router',
            'hammerjs'
        ],
        filesNeeded: {
            js: [
                'angular/angular.js',
                'angular-ui-router/release/angular-ui-router.js',
                'Keypress/keypress.js',
                'hammerjs/hammer.min.js',
                'threejs/build/three.js',
                'underscore/underscore.js'
            ]
        }
    },
    usesAngularJS: true,
    testRunner: 'karma',
    cssCompiler: 'less'
}

One command to build your app

angus dev

Every build task
is pre-configured!

Uses GulpJs internally

Production builds

angus prod

Case Study

Ironbane

Any questions?

Oh and hey,
I'm Nick!

nickjanssen.com

@nickjanssen_com