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

Declarative Build Configurations

By Nick Janssen

Declarative Build Configurations

Tools like GruntJS and Yeoman are great, but they can be a headache when you need to maintain several apps. Most web apps share the same build tasks, yet they are usually copied over or generated instead of reusing them. Out of my own frustrating experience with copying and maintaining too many Gruntfiles, I decided to create a declarative build framework called Angus that chooses convention over configuration. This talk will explore the problem of build code duplication and how Angus can be used to resolve it.

  • 8,051
Loading comments...

More from Nick Janssen