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

Compassで開発環境と本番環境を切り替えてみる

More than 5 years have passed since last update.

開発環境と本番環境とがcompassでも切り替えられるらしい。
grunt使えばjsもまとめてできるしそっちのほうがいいじゃん、って話ではあるんですが、こちらはこちらで何かと便利かと思ったので使ってみました。


次のようなconfig.rbを用意してやります。

config.rb
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = (environment == :production)? "assets/img": "img"
javascripts_dir = "js"  

output_style = (environment == :production)? :compressed: :nested
relative_assets = (environment == :production)? false: true
line_comments = (environment == :production)? false: true

それぞれのプロパティについての説明については割愛するとして、ポイントは三項演算子をつかってるプロパティの評価文。
compassのconfigではenvironmentというプロパティが用意されていて、このプロパティは:development:productionの、いずれかのtypeを持つことができます。

それで、上記のconfig.rbでは何をしているか。
プロパティenvironment:productionが指定されていた場合には三項演算子の二項目の値を、そうでない(つまりデフォルト値の:development)であれば三項目に指定された値を使うようにしているわけです。


さて、config.rbがかけた所で、じゃあ実際にどうやって環境を切り替えるか。
まず開発環境についてですが、こちらはデフォルトで指定されていますので特に指定などはせずに、

compass compile

もしくは

compass watch

してやればよいでしょう。
次に本番環境に切り替えてみます。
これもとてもかんたんで、コンパイル時にいつものコマンドの代わりに次のコマンドを叩けばおーけーです。

compass compile -e production --force

-e productionで環境を設定している感じですね。
ここで--forceとしたのは、scssファイルが書き換えられていない場合には環境を切り替えたとしてもコンパイルが実行されないからです。

なので確実にコンパイルするために--forceしてあげる、という感じですね。
僕はわざわざこれうつのが面倒なのでalias設定してcprodみたいな感じにしてやってます。


最後に参考までに、実際にこれをつかってコンパイル実行するとどうなるか載せてみました。

hoge.scss
@import "compass";

.hoge {
    background: image-url('hoge.png');
}

このしょっぼいscssをコンパイルすると、

:development

hoge.css
/* line 3, ../sass/hoge.scss */
.hoge {
  background: url('../img/hoge.png'); }

:production

hoge.css
.hoge{background:url('/assets/img/hoge.png')}

という感じになります。
これだけだと有り難みがあんまり感じられない気もしますが、規模が大きくなってきたらそこそこ便利に使えるかも・・・しれない。

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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした