compassでsassのコンパイル・スプライト画像生成

Grunt+Compassでフロント環境構築【導入編】の続きです。

目次

1. Grunt+Compassでフロント環境構築【導入編】
2. compassでsassのコンパイル・スプライト画像生成
3. Gruntfile.js作成

概要

sassのコンパイル
スプライト画像生成

config.rb作成

config.rb

#圧縮するかどうかの設定(:nested, :expanded, :compact, or :compressed)
output_style = (environment == :production) ? :compressed : :expanded

#SASS内の行番号の出力(true or false)
line_comments = (environment == :production) ? :false : :true


# 対象ディレクトリを指定
http_path="/"
css_dir = "src/main/webapp/css"
sass_dir = "src/main/webapp/scss"

images_dir = "src/main/webapp/img"
generated_images_dir = 'src/main/webapp/img'

javascripts_dir = "src/main/webapp/js"

http_generated_images_path = "/img"
http_images_path = "/img"


#スプライト設定
on_sprite_saved do |filename|
  if File.exists?(filename)
    FileUtils.mv filename, filename.gsub(%r{([a-z0-9_]+)-[a-z0-9]+\.png$}, '\1/sprite.png')
  end
end

on_stylesheet_saved do |filename|
  if File.exists?(filename)
    css = File.read filename
    File.open(filename, 'w+') do |f|
      f << css.gsub(%r{([a-z0-9_]+)-s[a-z0-9]{10}\.png}, '\1/sprite.png')
    end
  end
end

実行

下記コマンドでwatchタスク実行可能
変更があった場合は自動でconfig.rbで設定したタスクが実行される。

conpass w

続き: Gruntfile.js作成