Middlemanがいい感じ。静的サイトをいい感じに作れるぞ。

今後、ちょっと静的サイトを作ることも多いだろうと思って、node.jsを使ったgrunt.jsとか調べてたり、sinatra使って、自分で色々テンプレート作ったりしてたんですが、Middlemanでいいじゃん!という感じになったので、まとめておきます。

特徴

  • 多彩なプリプロセッサ対応
  • ローカルサーバー起動して自動コンパイルの様な環境を作れる
  • livereload対応
  • css,jsの自動minify
  • YAMLなどでデータ構造を利用できる
  • layout,partialなど、html関係の再利用などができる。

インストール

gemを使ってのインストールになります。

gem install middleman

多分色々依存関係でインストールされるかなー

基本的な使い方

$ middleman init my-project-name
$ middleman server
$ middleman build

上記3個が基本コマンド!

この辺りは蛇足
$ middleman extension NAME  #=> extensionのひな形作成
$ middleman upgrade         #=> bundle updateと同じ感じ
$ middleman version         #=> バージョンの表示。 ちなみに現状 3.0.6

middleman init について

ひな形作ります。

$ middleman init my-project #=> bundle installが走ります。

ちなみに、initの代わりに、 i, n, new が使えます。

treeで確認

my-project
├── Gemfile
├── Gemfile.lock
├── config.rb
└── source
    ├── images
    │   ├── background.png
    │   └── middleman.png
    ├── index.html.erb
    ├── javascripts
    │   └── all.js
    ├── layouts
    │   └── layout.erb
    └── stylesheets
        ├── all.css
        └── normalize.css

こんな感じでファイルが生成されます。

オプションについて

  -T, [--template=TEMPLATE]      # Use a project template: default, html5, mobile, smacss
                                 # Default: default
      [--css-dir=CSS_DIR]        # The path to the css files
      [--js-dir=JS_DIR]          # The path to the javascript files
      [--images-dir=IMAGES_DIR]  # The path to the image files
      [--rack]                   # Include a config.ru file
      [--skip-gemfile]           # Don't create a Gemfile
      [--skip-bundle]            # Don't run bundle install
      [--skip-git]               # Skip Git ignores and keeps

テンプレートについての補足

middleman init する際に、 middleman init -T smacss などとすることで、smacssというテンプレートを使用してのひな形作成がされる訳ですが、 mkdir -p ~/.middleman/templateという感じで、ディレクトリ作るとテンプレートを追加できます。

で、sourceディレクトリと、config.rbとか作っておけば、mimddleman init -T templateで利用できますよ!

middleman server について

cd my-project
middleman server

などとやると、

== The Middleman is loading
== The Middleman is standing watch on port 4567

という感じでhttp://localhost:4567で確認できます。

serverは s でも良いし、もっというと middleman だけでもローカルサーバーは起動します。

オプションについて

-e, [--environment=ENVIRONMENT]    # The environment Middleman will run under
                                   # Default: development
-h, [--host=HOST]                  # Bind to HOST address
                                   # Default: 0.0.0.0
-p, [--port=PORT]                  # The port Middleman will listen on
                                   # Default: 4567
    [--verbose]                    # Print debug messages
    [--instrument=INSTRUMENT]      # Print instrument messages
    [--disable-watcher]            # Disable the file change and delete watcher process
    [--profile]                    # Generate profiling report for server startup
    [--reload-paths=RELOAD_PATHS]  # Additional paths to auto-reload when files change

–verboseとかは良いけど、ほかは基本的に気にしなくてもいいかなー

middleman build について

middleman build

で、サーバーにアップロードできる形にビルドされます。

build
├── images
│   ├── background.png
│   └── middleman.png
├── index.html
├── javascripts
│   └── all.js
└── stylesheets
    ├── all.css
    └── normalize.css

という感じでbuildディレクトリの中身そのままアップロードで多分大丈夫です。

オプションについて

-c, [--clean]                  # Removes orphaned files or directories from build
-g, [--glob=GLOB]              # Build a subset of the project
    [--verbose]                # Print debug messages
    [--instrument=INSTRUMENT]  # Print instrument messages
    [--profile]                # Generate profiling report for the build

–verboseとかは良いけど、ほかは基本的に気にしなくてもいいかなー


詳しくはここを見てください。

Middleman: Hand-crafted frontend development


以上です。

これだけ書けば自分は忘れない!

長くなったんで、buildまでの設定とか、helperとかは別記事で!