Declarative

Build Configurations

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?

Are you stating what needs to be done?

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

21 Projects

21 Gruntfiles

Let's switch to Gulpjs!

Can we do better?

Yes, we can!

Angus, a declarative build tool

How?

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'
}

Embraces Bower

Even if you
don't like Bower...


Angus supports
local folders!

One command to build your app

angus dev

Every build task
is pre-configured!

Uses GulpJs internally

Production builds

angus prod

Case Study

Ironbane

Now using Angus!

Btw, if you want to work on a cool 3D WebGL game...

We're looking for people!

ironbane.com
github.com/ironbane

Any questions?

Oh and hey,
I'm Nick!

nickjanssen.com

@nickjanssen_com

Made with Slides.com