Middleman Meetup Tokyp
モダンなweb開発のあらゆるショートカットやツールを採用した静的サイトジェネレータ
middleman-slim(gem) - templateを最初からslimに
- 利用シーン
CSS/jsライブラリのテスト
モック
documrnt
作業量を減らす -> slim
- でrubyのコード iteratorで書きやすい slimの日本語版 yterajima/slim
-
テンプレートコントローラ preview server
static site build -
パーツ共有(layout partical)
-
全ての項目を見なくても良い
-
1/2読めば良い
-
ここだけ見れば(ローカルデータ / サイトマップ / Rack / カスタム)
-
yaml / bundlr(gemの管理ツール)
###知らぜらる機能 middleman-coreにコアな機能が sprockete AssetPipelineに関する処理を
-
bower連携 config.rbで :bower_dir
-
featureを読む(Cucumberでテスト書かれている)
alias bem = bundle exec middleman
Grunt 初期設定が若干めんどい -> middlemanは初期導入が楽
layout - yield
== yield
partialを使える(module化)
frontmatter(変数)
sass/commpass は標準で使用可能
$ middleman init -t template名
~/.middleman 内にtempalteを作成して入れておけばinitの際に読み込める = linuxのskel見たいな
sprocketでがっちゃんこする = asset(纏める)
susy
- AMICUS(HTML5 + haml + sass/compass + susy(Grid System))
####susy
responsive grids for campass
compassに依存
mixinが便利
MiddlemanにCompassが標準でbundleされているのでgem i susyするだけ
config.rb で require 'susy'
Susyはgrid用のclassを用意していない -> htmlでclassがfatにならない / 任意のGrid数が用意しやすい
JSだけでがっつり - serverサイドはAPIで返すだけ
GruntがDefoに (Rake + Guard 的な) - 柔軟だけど設定がめんどい
- 設定が少ない
- Asset Pipeline
- Rackの資産を利用できる rack = serverの仕組み(sinatraもrailsもrackで動いている)
- 開発時に動的サーバ デプロイ時に静的ファイル出力という理想的な動作
compile + concat + minify
requireによる依存関係の解決
開発時にファイルを分割して読み込める(開発時のdebuggが楽)
//= require base
# ファイルの依存関係を記述しれおけば楽
require "rack/reverse-proxy"localでもクロスオリジンの壁を越えてapiを使える
prog4designer