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枚にしたいため