Grunt.js

Getting started

//Install grunt command line tools
npm install -g grunt-cli
//Specify plugins by saving to package.json file
npm install grunt-contrib-uglify --save-dev 
npm install grunt-contrib-concat --save-dev
						

Gruntfile Configuration

grunt.initConfig({
   our_file_list: ['./src/js/{Models,Controllers}/*.js', './src/js/index.js'], 
   uglify: {
      build: {
          src: 'js/reveal.js',
          dest: 'js/reveal.min.js'
      },
      all: {
         files: {
            'js/compiled/file.js': '<%= our_file_list %>',
         }
      }
   },
   concat: {
      dist: {
         src: ['js/reveal.min.js', 'js/compiled/file.js'],
         dest: 'dist/built.js',
      },
   }
});
						

Plugins via package.json

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.3.3",
    "grunt-contrib-uglify": "~0.4.0"
  }
}
						

Command Line Usage

//Run all uglify targets
grunt uglify
//Execute uglify, but only the all target
grunt uglify:all

						

Grunt.js - strengths

• Tons of plugins available
• Easy to configure individual tasks
• Easy to use with existing projects
• Very flexible - allows custom tasks to be written
• Comes pre-packaged in some generators/scaffolding

Grunt.js - weaknesses

• Plugins do multiple things
• Headache of temp files/folders
• Not one solid control flow
• Configuration can get lengthy - 500+ lines
• Very lengthy & vast API

Grunt.js - annoyances

• Tons and tons of temp files & tasks to clean up
• Can get pretty slow when tasks increase

Gulp.js

Getting started

//Install grunt command line tools
npm install -g gulp
//Specify plugins by saving to package.json file
npm install --save-dev gulp-uglify
npm install --save-dev gulp-concat
					

gulpfile Configuration

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
gulp.task('scripts', function() {
   // Minify and copy all JavaScript (except vendor scripts)
   return gulp.src(paths.scripts)
      .pipe(uglify())
      .pipe(concat('all.min.js'))
      .pipe(gulp.dest('build/js'));
});
					

Command Line Usage

//Run all uglify targets
gulp scripts
					

Gulp.js - strengths

• Provides node streams - no need for tmp files/folders
• Tons of plugins available
• Gulpfile is code, not config
• Plugins do ONE thing
• Only has 5 functions to learn!

Gulp.js - weaknesses

• Can be daunting to learn streams
• Sometimes setting up src/dest can be tricky (use base)

Gulp.js - annoyances

Havent used long enough to form any

Brunch

The first build system widely used and available. Uses skeletons (like scaffolding) to create app directory structure.

Getting started

//Create new skeleton of angular app
brunch new https://github.com/scotch/angular-brunch-seed myapp
//Install bower packages (css/js/etc)
bower install
//tell Brunch to watch your project and incrementally rebuild it when source files are changed
brunch watch --server
//builds a project for distribution. By default it enables minification
brunch build --production
					

Brunch - strengths

• Easy to set up - use skeleton
• Introduces conventions for you
• Simple CLI - only a few commands
• Commands for dev/staging/production releases

Brunch - weaknesses

• Not using conventions causes headaches
• Not easy to set up with existing projects
• Skeleton set ups not maintained as fast as plugins
• Not as supported as Grunt/Gulp

Broccoli

Mainly focused on Ember.js apps, and ships with Ember CLI

Broccoli - strengths

• Trees allow dev to think of assets
• Provides caching for map files
• Makes some conventions for you - assets
• Watching files handled by serve, only rebuilds whats needed

Broccoli - weaknesses

• No parallelism