Hanami gulp assets with digests

.babelrc

{
  "plugins":
  [
    "transform-undefined-to-void",
    "transform-es2015-arrow-functions",
    "transform-es2015-block-scoping",
    "transform-es2015-block-scoped-functions",
    "transform-es2015-constants",
    "transform-es2015-destructuring",
    "transform-es2015-parameters",
    "transform-es2015-spread",
    "transform-es2015-template-literals",
    "transform-es2015-computed-properties",
    "transform-es2015-shorthand-properties"
  ]
}

gulpfile.js

var gulp = require('gulp'),
    util = require('gulp-util'),
    glob = require('glob'),
    path = require('path'),
    del  = require('del'),
    gzip = require('gulp-gzip'),
    RevAll = require('gulp-rev-all'),
    revdel = require('gulp-rev-delete-original'),
    through = require('through2'),
    imagemin   = require('gulp-imagemin'),
    imageOptim = require('imageoptim');
    sourcemaps  = require('gulp-sourcemaps'),
    sass         = require('gulp-sass'),
    postcss      = require('gulp-postcss'),
    cssnano      = require('cssnano'),
    autoprefixer = require('autoprefixer'),
    gulpSequence  = require('gulp-run-sequence'),
    rollup             = require('rollup').rollup,
    rollupBabel        = require('rollup-plugin-babel'),
    rollupUglify       = require('rollup-plugin-uglify'),
    rollupIncludePaths = require('rollup-plugin-includepaths');

/**********
 Main tasks
 **********/
gulp.task('dev', function(done) {
  return gulpSequence('clean', ['css:compile:dev', 'css:copy:dev', 'js:compile:dev', 'images:dev'], done);
});

gulp.task('prod', function(done) {
  return gulpSequence('clean', ['css:compile:prod', 'css:copy:prod', 'js:compile:prod', 'images:prod'], done);
});

gulp.task('build', function(done) {
  return gulpSequence('prod', 'rev', 'gzip', done);
});

gulp.task('watch', ['dev'], function() {
  gulp.watch('assets/css/**/*.scss', ['css:compile:dev']);
  gulp.watch('assets/css/**/*.css', ['css:copy:dev']);
  gulp.watch('assets/js/**/*.js', ['js:compile:dev']);
  gulp.watch('assets/img/*', ['images:dev']);
});

/****************
 Javascript tasks
 ****************/
gulp.task('js:compile:dev', function(done) {
  jsBuild(false).then(function() { done(); });
});

gulp.task('js:compile:prod', function(done) {
  jsBuild(true).then(function() { done(); });
});

/*********
 CSS tasks
 *********/
gulp.task('css:copy:dev', function() {
  return cssBuild(false);
});

gulp.task('css:copy:prod', function() {
  return cssBuild(true);
});

gulp.task('css:compile:dev', function() {
  return sassBuild(false);
});

gulp.task('css:compile:prod', function() {
  return sassBuild(true);
});

/************
 Images tasks
 ************/
gulp.task('images:dev', function() {
  return gulp.src('assets/img/**/*')
    .pipe(gulp.dest('public/img'));
});

gulp.task('imagemin', function() {
  return gulp.src('assets/img/**/*')
    .pipe(imagemin({
      plugins: [
        imagemin.gifsicle(),
        imagemin.jpegtran(),
        imagemin.svgo()
      ]
    }))
    .pipe(gulp.dest('public/img'));
});

gulp.task('images:prod', ['imagemin'], function(done) {
  imageOptim.optim(glob.sync('public/img/**/*.png'))
    .then(imageOptimReport).done(done);
});

/******************
 Build finalization
 ******************/
gulp.task('clean', function() {
  return del('public/**/*');
});

gulp.task('rev', function () {
  var revAll = new RevAll({
    fileNameManifest: 'assets.json'
  });

  return gulp.src(['public/**/*', '!public/**/*.{map, html}', '!public/assets.json'])
    .pipe(revAll.revision())
    .pipe(revdel())
    .pipe(gulp.dest('public'))
    .pipe(revAll.manifestFile('assets.json'))
    .pipe(through.obj(fixManifest))
    .pipe(gulp.dest('public'));
});

gulp.task('gzip', function() {
  return gulp.src(['public/**/*.{js,css}'])
    .pipe(gzip({
      skipGrowingFiles: true,
      gzipOptions: { level: 7 }
    }))
    .pipe(gulp.dest('public'));
});

/*****
 Utils
 *****/
function jsBuildFile(file, minify) {
  var plugins = [
    rollupIncludePaths({ paths: ['assets/js'] }),
    rollupBabel()
  ];

  if (minify) plugins.push(rollupUglify());

  return rollup({
    entry: file,
    plugins: plugins
  }).then(function(bundle) {
    bundle.write({
      sourceMap: true,
      dest: 'public/js/' + path.basename(file),
      format: 'iife'
    });
  }).catch(util.log);
}

function jsBuild(minify) {
  var jobs = glob.sync('assets/js/*.js').map(function(file) {
    return jsBuildFile(file, minify);
  });

  return Promise.all(jobs);
}

var autoprefixerOptions = { browsers: ['last 2 versions'], cascade: false };

function cssBuild(minify) {
  var postCSSPlugins = [autoprefixer(autoprefixerOptions)];

  if (minify) postCSSPlugins.push(cssnano({ safe: true } ));

  return gulp.src('assets/css/**/*.css')
    .pipe(sourcemaps.init())
    .pipe(postcss(postCSSPlugins))
    .pipe(sourcemaps.write('.', { sourceRoot: 'assets/css' }))
    .pipe(gulp.dest('public/css'));
}

function sassBuild(minify) {
  var style = 'expanded',
      postCSSPlugins = [autoprefixer(autoprefixerOptions)];

  if (minify) {
    style = 'compressed';
    postCSSPlugins.push(cssnano({ safe: true }));
  }

  return gulp.src('assets/css/*.scss')
        .pipe(sourcemaps.init())
        .pipe(sass({ outputStyle: style }).on('error', sass.logError))
        .pipe(postcss(postCSSPlugins))
        .pipe(sourcemaps.write('.', { sourceRoot: 'assets/css' }))
        .pipe(gulp.dest('public/css'));
}

function imageOptimReport(result) {
  var saved = result.reduce(function(prev, current) {
    return (current.savedBytes || 0) + prev;
  }, 0);

  util.log('imageoptim: Minified ' + result.length + ' image(s) ' +
    util.colors.gray('(saved ' + (saved / 1024).toFixed(2) + ' kB)'));
}

function fixManifest(file, enc, cb) {
  var manifest = JSON.parse(file.contents),
      newManifest = {};

  Object.keys(manifest).forEach(function(k) {
    newManifest['/' + k] = '/' + manifest[k];
  });

  file.contents = new Buffer(JSON.stringify(newManifest, null, 2));

  this.push(file);

  cb();
}

hanami-config-application.rb

# ...
configure do
  assets do
    # ...
    sources = [
      'public'
    ]

    prefix '/'
  end
  
  configure :production do
    assets do
      compile false
      digest  true
    end
  end
end

Procfile

web: bundle exec hanami server
assets: gulp watch