compassミニマムスタートの始め方
既存プロジェクトの一部だけにcompassを取り入れてみる。
すでに公開中のサイトにcompassを導入する場合は、sassフォルダに現状のcssをぶち込んでしまえば良い訳ですが、それは一人で管理している場合。
複数人で作業している場合には、全員にcompassに乗り換えてもらわないと行けないので中々めんどうです。。単発のお仕事でキャンペーンページ作成や新機能の追加などの場合は、自分の担当部分だけでもcompassでやりたい！と思うのですが、準備やコミットが面倒くさい事この上ない、、、
ということで、既存のプロジェクトで自分の作業ファイルだけをcompass採用するためのプラクティスです。
メリット
- 既存のフォルダを汚さない
- 作業フローがどんな形でもコンフリクトが起きない
- フォルダの整理などの事前準備が（ほとんど）不要
どうやるの？
compassフォルダを追加で作成- htmlのcssファイルへのパスを変更
compass w実行- 実作業
- 最後に
commpass compile -e production - htmlの記述を戻して、納品！
フォルダ構成
作業フォルダ/ └ css/ └ img/ └ compass/ └ sass/ └ img/ └ css/ └ config.rb
config.rbはこんな感じ
やってること
Gruntが書き出すcssを監視して、親ディレクトリ*1のcssフォルダに自動的に移動します。
既存のcssファイルに同じ名前の物が有ったら確認メッセージを表示するので、間違って上書きも発生しません。
注意
- cssで使用している画像の移動は手作業で
commpass compile -e production実行時にcssに変更が無いと変換されないので、--forceオプションを付けるか、grunt cleanを実行してから
最後に
compass/*.cssをcss/に移動させているだけなんですが、そこがコントロールできるのがポイント。
納品やコミット作業のタイミングまでcompass一式を分離しておくので、共有フォルダで他の人と同時に作業していても問題無いですし、間違って関係ないcssを消してしまう事もありません。
また、最初に色々パスを書き換えて、、、的な準備が不要になるので気楽にcompass導入ができるのではないかと。自動化もされるので、なれないフォルダ構成にあたふたする必要もありません。
画像ファイルの移動ややhtmlのcssパスの書き換えは手作用になるのが難点ですが、ミニマムスタートということでこの形式。完全移行か不採用かっていう葛藤ではなく、とりあえず、コスト0でスタートすることは大事だと思うのです。
