【メモ】middleman4でbuild時にjsを1枚にまとめる

middleman3のようにbuildでjsファイルをまとめてくれないため、
gulpを利用してbuildしたときにjsファイルを1枚にまとめてついでにminifyする方法の私的メモ。
layoutごとに異なるJSを読み込んでいる場合はオススメしません。
node.jsやnpmが使える前提です。

執筆時のバージョン
・node v8.9.1
・npm v5.5.1
・gulp CLI version 3.9.1 Local varsion 3.9.1

使用するプラグインは
・gulp-concat2.6.1
・gulp-uglify3.0.0

まずはmiddlemanのプロジェクトへ移動し以下を実行

npm init

enter連打でOK
rootディレクトリにpackage.jsonが生成される。
続いて作業環境にもGulpをインストールするため以下のコマンドを実行

npm i -D gulp

rootディレクトリにmnode_mmodulesが生成される
さらに今回使用するプラグインをインストールするため以下のコマンドを実行

npm i -D gulp-concat gulp-uglify

rootディレクトリにgulpfile.jsを作り、以下の内容を入力

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify')

gulp.task('build.js', function(){
  gulp.src('source/assets/javascripts/**/*.js')
  .pipe(concat('site.js'))
  .pipe(uglify())
  .pipe(gulp.dest('build/assets/javascripts'))
});

gulp.task('default', ['build.js']);

元になるjs、出力先のディレクトリなどは適宜環境に合わせてください。

config.rbに以下の内容を記述
簡単に説明すると、通常のbuild時にjsファイルは除外してgulpにbuildさせる。

configure :build do
  ignore 'assets/javascripts/*'
  after_build do
    system('gulp')
  end
end

gulpfile.jsの最下行に設定したデフォルトタスクが「build.js」なので、結果的に1枚にまとめてminifyしたものがbuildされる。

では早速buildしてみましょう！

[16:18:00] Using gulpfile ~/Sites/mysites/middleman4/gulpfile.js
[16:18:00] Starting 'build.js'...
[16:18:00] Finished 'build.js' after 5.92 ms
[16:18:00] Starting 'default'...
[16:18:00] Finished 'default' after 14 μs
Project built successfully.

こんな感じのログが流れればOK。
全てのJSをまとめてminifyされているかsite.jsを確認してください。

開発環境でJSが動かない系の応急措置

<% if development? %>
  開発環境で使うJSを全部読み込む
<% end %>

page speed insight的にjsファイルは1枚にしたいため