webpack(3.10.0)でモダンな静的サイトのテンプレートを作るという記事を書きました。この記事は古い内容になります。公開用のサイトに限らず、実験用や勉強用に静的なサイトを作成する事がちょくちょくあります。その度に自分のスニペットやネタ帳から色々ひっぱり出し、時にはGoogleで検索したりして(まあそれが知識のアップデートになっている事も多々あるけど)作成していました。決まりきっている作業やコピペをするのは時間が勿体無いし、今のデフォルトテンプレートはこんな感じかな?というのを可視化するために、自分用の静的サイトのテンプレート的な物を作ってみる事にしました。middlemanのv4がリリースされてSprocketsが非標準になったのでsassとjsのタスクもgulpで行うようにし、middleman+gulpな環境を作ってみます。ちなみに今回作ったリポジトリはt4traw/static_site_bootstrapです。最初の準備middleman+gulpの設定sass関連の設定と設計javascript関連の設定build時のtaskと仕上げgithubに上げておけば簡単にmiddlemanのテンプレートに!最初の準備Rubyはインストール済みとします。Nodeは最新の物をインストールしました。人はPATHを設定しましょう。※gulpのPATHの通し方についてはこのページが非常に参考になります。~/.zshrcテンプレートを作っていきます。僕はrbenv-gemsetを使っているので、gemset用のファイルを作成し、Gemfileを作成します。initする時に色々聞かれますが、Livereload以外は全て「n」で。compassは最近あまり使わないし、gulpを使うならまあいいかなと思って、今回から使わない事に。config.ruが欲しい人などは必要に応じて「Y」にしてください。次にgulpの初期設定をします。}}といった具合に書かれていると思います。あとは処理を書くためのgulpfile.jsを作成すれば必要なファイルがひとまず揃います。gulpfile.jsmiddleman+gulpの設定middleman+gulpの設定をしていきます。middlemanのconfigを設定。僕はてっきりmiddlemanのcssとかjsをgulpとか外部ツールに渡して生成を完全に分離できるのかと思ってたんだけど、Sprocketが非標準になってもstylesheetsなどをbuild時にコンパイルしてしまう(all.cssを何故かallという拡張子無しのファイルで出力してくれる)。buildの時に無視するようにします。:css_dirなどはちゃんと書かないとダメです。external_pipeline(外部パイプライン)を設定します。watchしているのと同じ状態になりました。次にgulpfile.jsにgulpのタスクで最低限必要な事を書きます。//});defaultタスクが無いとgulpが使えないって怒られるので注意。middlemanターミナルでgulpのwatchが走っている事が確認できました。sass関連の設定と設計sassに関する設定をしていきます。serveのプレビューではsource/stylesheetsにcssが無いとダメなので、ひとまずsource/stylesheetsにcssを生成する事にします。今までall.cssにsassの@importで結合していましたがgulpで全部まとめて出力するようにしました。footer.sass)と3つのフォルダに分けて書くようにしています。initializeフォルダには最初に読まれてないといけないcssリセットや変数などをまとめておくvariables.sass。foudationフォルダにはレイアウトや基本設定。userには、より細部の必要なスタイルを書いていきます。これらをまとめて出力するためにgulp-concatを使用します。あと当然必要なgulp-sassと、prefixを自動でつけてくれるgulp-autoprefixerをインストールします。最終的な名前をall.cssにする為にgulp-renameも入れます。.pipe(gulp.dest('source/stylesheets'));});アンダースコアのついたファイルは除外するために、!(_)*.sassといった指定方法にしました。userフォルダの中で@importで読み込む用のsassが欲しい場合にも対応できます。これでsource/stylesheetsの中にall.cssが生成されるようになりました。これを更新があったら自動的に回せるように、watchタスクの中に入れておきます。['css.sass']);});all.cssはバージョン管理する必要が無いので.gitignoreに追加しておきます。javascript関連の設定javascriptも同じくsourceの中にall.jsが無いとダメなので、jsファイルで更新があったら生成されるようにします。フロントエンドな方はもっと凝った内容になると思うのですが、僕は簡単なjavascriptやjqueryを使うぐらいなので結合するだけのシンプルな内容です。(実際のjavascript)こんな具合のフォルダ構成で、あとはそれをall.jsに結合します。.pipe(gulp.dest('source/javascripts'))});watchにもjsの更新と処理を追加します。['js.concat']);});all.jsもバージョン管理する必要が無いので.gitignoreに追加しておきます。build時のtaskと仕上げ最後にbuildする時のminifyやuglifyを追加。gulp-uglifyminifyやuglifyしたファイルはそのままbuildフォルダに保存。'js.uglify']);こんな感じで書くとうまくいかない。配列の順番通りにやってくれるかと思ったら、gulpは並列処理なので、全部同時にやってしまう。順序を設定する為にはrun-sequenceが必要みたい。run-sequenceで、こんな感じに書くと思い通りの動作になった。);});仕上げに、gulpでエラーが出た時に処理が止まらないようにし、さらにそれを通知するようにgulp-plumberとgulp-notifyを追加。gulp-notify各タスクに処理を追加する。buildした時に自動的に走るようにする。endendbuildのテストをしてみる。buildbuildディレクトリにstylesheetsの中には結合とminifyされたall.css、javascriptsの中には結合とuglifyされたall.jsが生成されてたらOKです。installをしてくれる。.gitignoreが作られないので、そこは自分で作るか何かしら方法を作っておいた方が良さそう。いうわけで、middleman+gulpで簡単な静的サイトテンプレートの作り方でした。