[Middleman 4] Middleman 4 で生成されたプロジェクトファイルと初期設定を確認する

公開日: 2017/05/24
更新日: 2018/10/04

素の Middleman 4 の config を確認します。

[markdown]

“`prettyprinted
% middleman version
Middleman 4.2.1
“`

> * [Middleman: 作業を効率化するフロントエンド開発ツール](https://middlemanapp.com/jp/)
> * [DriftwoodJP/sandbox-middleman4](https://github.com/DriftwoodJP/sandbox-middleman4)

## インストール

通常は `gem install` で。

“`prettyprinted
% gem install middleman
“`

動作確認をしたいので、`bundle install` します。

“`prettyprinted
% bundle init
“`

“`ruby:Gemfile
# frozen_string_literal: true
source ‘https://rubygems.org’
gem ‘middleman’
“`

“`prettyprinted
% bundle
“`

## プロジェクトの初期化

`middleman init` すると指定したディレクトリにファイルが展開されます。

“`prettyprinted
% middleman init middleman4_project
“`

以下で開発サーバを起動します。

“`prettyprinted
% cd middleman4_project
% middleman server
“`

## 標準セットアップ時のコンフィギュレーション

middleman4_project に展開されたファイルの状況を確認します。

### Gem

`middleman-autoprefixer` は標準添付されています。

“`ruby:Gemfile
source ‘https://rubygems.org’
gem ‘middleman’, ‘~> 4.2’
gem ‘middleman-autoprefixer’, ‘~> 2.7’
gem ‘tzinfo-data’, platforms: [:mswin, :mingw, :jruby]
gem ‘wdm’, ‘~> 0.1’, platforms: [:mswin, :mingw]
“`

「[Compass は拡張機能になりました。デフォルトでは同梱されます。](https://middlemanapp.com/jp/basics/upgrade-v4/)」となっていましたが、現行バージョンでは `@import ‘compass’` できず。
[正式](https://github.com/middleman/middleman/pull/2050)に外されていました。

“`prettyprinted
% bundle list
Gems included by the bundle:
* activesupport (5.0.3)
* addressable (2.5.1)
* backports (3.8.0)
* bundler (1.14.6)
* coffee-script (2.4.1)
* coffee-script-source (1.12.2)
* compass-import-once (1.0.5)
* concurrent-ruby (1.0.5)
* contracts (0.13.0)
* dotenv (2.2.1)
* erubis (2.7.0)
* execjs (2.7.0)
* fast_blank (1.0.0)
* fastimage (2.1.0)
* ffi (1.9.18)
* haml (5.0.1)
* hamster (3.0.0)
* hashie (3.5.5)
* i18n (0.7.0)
* kramdown (1.13.2)
* listen (3.0.8)
* memoist (0.15.0)
* middleman (4.2.1)
* middleman-cli (4.2.1)
* middleman-core (4.2.1)
* minitest (5.10.2)
* padrino-helpers (0.13.3.3)
* padrino-support (0.13.3.3)
* parallel (1.11.2)
* public_suffix (2.0.5)
* rack (2.0.3)
* rb-fsevent (0.9.8)
* rb-inotify (0.9.8)
* sass (3.4.24)
* servolux (0.13.0)
* temple (0.8.0)
* thor (0.19.4)
* thread_safe (0.3.6)
* tilt (2.0.7)
* tzinfo (1.2.3)
* uglifier (3.2.0)
“`

### config.rb

– `autoprefixer` はセットアップ済みでした。
– `minify_css` と `minify_javascript` はコメントアウト後にそのまま利用可能でした。

“`ruby:config.rb
# Activate and configure extensions
# https://middlemanapp.com/advanced/configuration/#configuring-extensions
activate :autoprefixer do |prefix|
prefix.browsers = “last 2 versions”
end
# Layouts
# https://middlemanapp.com/basics/layouts/
# Per-page layout changes
page ‘/*.xml’, layout: false
page ‘/*.json’, layout: false
page ‘/*.txt’, layout: false
# With alternative layout
# page ‘/path/to/file.html’, layout: ‘other_layout’
# Proxy pages
# https://middlemanapp.com/advanced/dynamic-pages/
# proxy(
# ‘/this-page-has-no-template.html’,
# ‘/template-file.html’,
# locals: {
# which_fake_page: ‘Rendering a fake page with a local variable’
# },
# )
# Helpers
# Methods defined in the helpers block are available in templates
# https://middlemanapp.com/basics/helper-methods/
# helpers do
# def some_helper
# ‘Helping’
# end
# end
# Build-specific configuration
# https://middlemanapp.com/advanced/configuration/#environment-specific-settings
# configure :build do
# activate :minify_css
# activate :minify_javascript
# end
“`

### Middleman Configuration

`middleman server` 起動後に、設定状況を下記で確認できます。

http://localhost:4567/__middleman/config/

## プラグイン
よく使うであろうプラグインの状況を確認します。

標準で同梱されている機能。

– middleman-autoprefixer
– minify_css (activate :minify_css)
– minify_javascript (activate :minify_javascript)
– gzip (activate :gzip)

追加可能なプラグイン機能。

– middleman-livereload
– middleman-deploy
– middleman-imageoptim
– middleman-minify-html

> * [Middleman: 開発サイクル](https://middlemanapp.com/jp/basics/development-cycle/)
> * [Middleman: ビルド & デプロイ](https://middlemanapp.com/jp/basics/build-and-deploy/)
> * [Middleman: ファイルサイズ最適化](https://middlemanapp.com/jp/advanced/file-size-optimization/)

## ファイル構成

`middleman init` で生成されたプロジェクトのファイルレイアウトを確認します。

> * [Middleman: ディレクトリ構造](https://middlemanapp.com/jp/basics/directory-structure/)

– HTML テンプレートは、Haml も標準で利用可能です。
– scss ファイルは、Sass でコンパイルされます。
– js ファイルについては CoffeeScript を使わない場合、別の手段を用意する必要がありそう。

“`prettyprinted
.
├── Gemfile
├── Gemfile.lock
├── build
│   ├── images
│   ├── index.html
│   ├── javascripts
│   │   └── site.js
│   └── stylesheets
│   └── site.css
├── config.rb
└── source
├── images
├── index.html.erb
├── javascripts
│   └── site.js
├── layouts
│   └── layout.erb
└── stylesheets
└── site.css.scss
“`

## v3 から v4 へのアップグレード情報を確認する

細かい変更箇所は色々ありますが、やはり sprockets が外された影響が大きいですね。
この部分の手当は必要そうです。

> * [Middleman: v4 へのアップグレード](https://middlemanapp.com/jp/basics/upgrade-v4/)

いままで通りに assets を管理したい場合、middleman-sprockets を利用する選択肢もあります。
[ES2015 のコンパイルもできる](https://github.com/vast/middleman-es6)ようですが。

> * [middleman/middleman-sprockets: Sprockets support for Middleman](https://github.com/middleman/middleman-sprockets)

`external_pipeline` を素直に使うのが良さそうかな。
[webpack](https://webpack.github.io/) でしょうかね。

> * [Middleman: 外部パイプライン](https://middlemanapp.com/jp/advanced/external-pipeline/)
[/markdown]