Help us understand the problem. What is going on with this article?

image_optimを使ってMiddlemanのBuild時に画像を圧縮しよう

More than 5 years have passed since last update.

アドベントカレンダー2013 8日目の記事です。
Middleman Advent Calendar 2013 - Adventar

今北産業

  • homebrewでimage_optimに必要なファイルをいれる
  • gemとconfig.rbの設定
  • buildに結構時間がかかるようになる(!)

homebrewで必要なものをいれる

$ brew install advancecomp gifsicle jhead jpegoptim jpeg optipng pngcrush

これだとpngoutだけ入らないので

画像ファイルをまとめて最適化する - 終わる世界とコンテンツ

$ brew tap adamv/alt && brew install pngout

これをしておこうとしたら、このadamv/altリポジトリがなかった。

ので、無理やり入れてみる

ImageOptim::BinNotFoundError when pngout is not installed. · Issue #1 · plasticine/middleman-imageoptim

$ brew install https://raw.github.com/cbguder/homebrew/53ea33bab5372ea74117ace8c44aa7ea988e93c2/Library/Formula/pngout.rb

これでおk

middleman-imageoptimのインストール

gem "middleman-imageoptim", "~> 0.1.3"
$ bundle install --path vendor/bundle

cofig.rbでの設定

config.rb
configure :build do
  activate :imageoptim
end



activate :imageoptim do |options|
  # print out skipped images
  options.verbose = true

  # Setting these to true or nil will let options determine them (recommended)
  options.nice = true
  options.threads = true

  # Image extensions to attempt to compress
  options.image_extensions = %w(.png .jpg .gif)

  # compressor worker options, individual optimisers can be disabled by passing
  # false instead of a hash
  options.pngcrush_options  = {:chunks => ['alla'], :fix => false, :brute => false}
  #options.pngout_options    = {:copy_chunks => false, :strategy => 0}
  options.optipng_options   = {:level => 6, :interlace => false}
  options.advpng_options    = {:level => 4}
  options.jpegoptim_options = {:strip => ['all'], :max_quality => 100}
  options.jpegtran_options  = {:copy_chunks => false, :progressive => true, :jpegrescan => true}
  options.gifsicle_options  = {:interlace => false}
end

これで middleman buildでimage optim できた!

でも、結構時間がかかる

めちゃくちゃ画像の数が多くなるとけっこう困る遅さ。

10ファイルで2〜3秒くらいかかってる。

katapad
バスキュールでフロントやってます。 Unity, WebGL, VR, IoT
http://unko.me
bascule
DATA × TECHNOLOGY × DESIGN
http://www.bascule.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away