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

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

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

% middleman version
Middleman 4.2.1

Contents

インストール

通常は gem install で。

% gem install middleman

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

% bundle init
Gemfile
# frozen_string_literal: true
source 'https://rubygems.org'
gem 'middleman'

% bundle

プロジェクトの初期化

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

% middleman init middleman4_project

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

% cd middleman4_project
% middleman server

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

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

Gem

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

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 は拡張機能になりました。デフォルトでは同梱されます。」となっていましたが、現行バージョンでは @import 'compass' できず。
正式に外されていました。

% 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 はコメントアウト後にそのまま利用可能でした。
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 init で生成されたプロジェクトのファイルレイアウトを確認します。

  • HTML テンプレートは、Haml も標準で利用可能です。
  • scss ファイルは、Sass でコンパイルされます。
  • js ファイルについては CoffeeScript を使わない場合、別の手段を用意する必要がありそう。
.
├── 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 が外された影響が大きいですね。
この部分の手当は必要そうです。

いままで通りに assets を管理したい場合、middleman-sprockets を利用する選択肢もあります。
ES2015 のコンパイルもできるようですが。

external_pipeline を素直に使うのが良さそうかな。
webpack でしょうかね。