はじめに
こんにちは、monpy です。
今日は何を話そうかというと、 Facebook で この記事が回ってきたんですね。
旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section4 ～Gulpで処理を自動化しよう～
この記事は、タイトル通り Gulp 入門の記事な訳です。
僕も フロントエンドの端くれなので Gulp は頻繁に利用します。
Gulp が出て一体どんだけ経ったんだろうなぁ、と思いをはせたので調べてみると
first commit が 4 Jul 2013。 まだ 2年と5ヶ月くらいしかたってないんだなぁ。と。
でも2年も経てば、技術が変わってしまうのが フロントエンドの常。gulp は辞めようぜ！なーんて記事もちらほら(ひえー)。
今日はそんな技術の移り変わりが激しくて嘔吐感に見舞われた感想です。
ちなみにタイトル通り middleman を知っている人の方が理解しやすい。
middleman
私は frontend のツールとしては node 製のタスクランナー を使用する一方で、 ruby 製の middleman をよく使います。
middleman のいいところ
middleman が 最大出力を発揮するのは、静的なサイトでテンプレートを使いまわしてぶん回したい時です。
弊社の works も middleman を使用して管理しています。
一時期、似た様な静的サイトジェネレータとして jekyll や assemble なんかもありましたが、
全部やった結果、 圧倒的に middleman の大勝利です(個人によって主張は異なります)。
node と ruby における javascript の管理
node に乗っかった タスクランナーと ruby に乗っかった middleman では javascript の取り扱い方に大きく差があります(別に javascript に限らないし、ここではすっごい曖昧に説明。なのでこの話はとっても間違っている)。
node
CommonJS
ruby
sprockets
ですね。
複数の js ファイルをきちんとした順序で管理してくれる仕組みを提供してくれます(CommonJS は browserify を通じて フロントエンドの旨味になります)。
sprockets ってさぁ...(ここから所感)
middleman における sprockets の不満
- es6 できねえ
- CommonJS の資産使えない
- module.exports に管理された方が幸せ - 名前空間とか管理するの面倒
と文句タラタラである。
しかし大丈夫、middleman に奇跡が起きた
Middleman v3 -> v4
middleman に革命が起こった。
公式からこのようなメッセージが
ここ数年で, コミュニティは Rails から離れ NPM のタスクランナー (Gulp, Grunt) や依存管理 (Browserify, Webpack), 公式ツール (ember-cli, react-native) やトランスパイラ(ClojureScript, Elm) に焦点を合わせるようになりました。
そう、これにより middleman は基本的に Node の資産を利用するのが基本となったのですねー。すごい。
増える管理ファイル
とはいうものの試してみると基本的なフォルダ構成もごつくなります。
これは, webpack を使って js を build する時の基本構成
.
├── Gemfile #gem
├── Gemfile.lock #gem lock
├── README.md #git用の レポジトリ説明
├── config.rb #middleman 用の設定
├── config.ru #rack 用の設定
├── node_module #node module
├── package.json #npm package の設定
├── source #サイトの種
├── vendor #bundle gemファイル
└── webpack.config.js #webpack の設定ファイル
なんなんだこれは、、、、
たかだかサイト一つ作るのにこんなに用意しなければならないのか、、、
お、おえー
でも、これからはこれがスタンダードになるんだろうか。でもマッシュアップならまだいい。
今までの資産は残るもの。。。
フロントエンドのカオス感が高まって参りましたね。
＃試したい人に
さて、ここまで話して、ちょっくら試したい方もいるでしょう。そうでしょう。
そんな人はこちら
にあるのを試してください。
v4 の新しい機能の一つに init する時に テンプレート指定ができるというのがあります。
というわけで、適当な空フォルダで
middleman init -T Instrument/middleman-template-instrument .
でok。簡単！これが middlemanですねー。
細かい説明は今度書こうかな。
総括
さて、散っていくもの咲いていくものの激しいフロントエンドの中で
ついてに ruby と node のいいとこ取りができる時代がやってきたわけですよ。
導入障壁がどんどん高くなってく雰囲気ですが。みなさん取り残されないように頑張ろうと思う毎日です。
middleman 使う人増えるといいなー。