middleman、出力ファイルの軽量化

5869 ワード
middleman middleman テキストリンク

いざmiddlemanでサイトを構築となったら、忘れずに設定しとくと幸せになれるかもしれません！
サイト表示高速化に役立つはずです。

CSSとJavascriptファイルのminify処理

これらはデフォルトで用意されているので、config.rbのコメントアウトを解除すればOK
ついでに無駄なlineコメントも抹殺！

config.rb
configure :build do
  compass_config do |config|
      config.line_comments = false
  end
  activate :minify_css
  activate :minify_javascript
end

ビルド時ファイルがminify化されて出力されます。

HTMLのminify処理

こちらはgemをbundleする必要があります。

Gemfile
gem "middleman-minify-html"

config.rbの上記したCSSやJSと同じ並びに追記

config.rb
configure :build do
  compass_config do |config|
      config.line_comments = false
  end
  activate :minify_html  
  activate :minify_css
  activate :minify_javascript
end

画像の圧縮

こちらもHTML同様、新規にgemを追加します。

Gemfile
gem 'middleman-imageoptim'

config.rbの上記したCSSやJSと同じ並びに追記

config.rb
configure :build do
  compass_config do |config|
      config.line_comments = false
  end
  activate :minify_html  
  activate :minify_css
  activate :minify_javascript
  activate :imageoptim do |options|
    options.pngout = false
    options.svgo  = false
  end
end

この状態でbuildすると

imageoptim  DOMAIN/***/images/***/**/*****.jpg (3.66% / 7KiB smaller)

コンソールにずらずらと圧縮結果が流れます。
いろいろオプションがあるので以下で確認してください。

imageoptim options

テキストファイルのGzip

これは公開しようとしているサーバーがgzipに対応していないとダメ。

HTTP Compression Test

上記チェッカーで対応しているか確認しましょう。

config.rb
configure :build do
  activate :minify_html  
  activate :minify_css
  activate :minify_javascript
  activate :imageoptim do |options|
    options.pngout = false
    options.svgo  = false
  end
  activate :gzip
end

buildすると

gzip  *******/***/****/**.html.gz (13.9 KB smaller)

がずらずら流れます。