building elm projects with gulp: basic setup

gulpfile.js

var gulp = require('gulp');
var elm = require('gulp-elm');
var plumber = require('gulp-plumber');
var del = require('del');

// builds elm files and static resources (i.e. html and css) from src to dist folder
var paths = {
  dest: 'dist',
  elm: 'src/*.elm',
  staticAssets: 'src/*.{html,css}'
};

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

gulp.task('elm-init', elm.init);

gulp.task('elm', ['elm-init'], function() {
  return gulp.src(paths.elm)
    .pipe(plumber())
    .pipe(elm())
    .pipe(gulp.dest(paths.dest));
});

gulp.task('staticAssets', function() {
  return gulp.src(paths.staticAssets)
    .pipe(plumber())
    .pipe(gulp.dest(paths.dest));
});

gulp.task('watch', function() {
  gulp.watch(paths.elm, ['elm']);
  gulp.watch(paths.staticAssets, ['static']);
});

gulp.task('build', ['elm', 'staticAssets']);
gulp.task('dev', ['build', 'watch']);
gulp.task('default', ['build']);

package.json

{
  "devDependencies": {
    "del": "^2.1.0",
    "gulp": "^3.9.0",
    "gulp-elm": "^0.2.0",
    "gulp-plumber": "^1.0.1"
  },
  "scripts": {
    "dev": "gulp clean && gulp dev",
    "build": "gulp clean && gulp build"
  }
}

Simple build:
npm run build

Development mode (run build on file change):
npm run dev