[Grunt & Yeoman] Compass と grunt-contrib-compass を組み合わせて sourcemap をエラーなしで生成する
以前のバージョンではエラーが発生して、うまく動かなかった sourcemap が生成されました。
[markdown]
## 状況
いろいろややこしくて見送っていたのですが、動くようになったとのこと。
> [Sourcemaps · Issue #23 · gruntjs/grunt-contrib-compass](https://github.com/gruntjs/grunt-contrib-compass/issues/23)
>
> Everything works fine with grunt-contrib-compass 0.9.1 and the gem compass 1.0.1
以前は下記のようなエラーで、.css.map ファイルが生成されませんでした。
“`prettyprinted
ArgumentError on line [“55”] of /Users/****/.rbenv/versions/2.1.1/lib/ruby/gems/2.1.0/gems/compass-1.0.0.alpha.21/lib/compass/sprite_importer.rb: wrong number of arguments (2 for 0)
“`
## インストール
以下の最新バージョンをインストールしました。
“`prettyprinted
% sass –version
Sass 3.4.3 (Selective Steve)
% compass –version
Compass 1.0.1 (Polaris)
Copyright (c) 2008-2014 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass
% npm view grunt-contrib-compass version
1.0.0
“`
## Gruntfile
こんな形で追記します。
“`ruby:Gruntfile.coffee
# grunt-contrib-compass
compass:
dev:
options:
environment: ‘development’
# debugInfo: false
sourcemap: true
“`
## 実行
“`prettyprinted
% grunt compass
Loading “grunt-contrib-compass” plugin
Running “compass:dev” (compass) task
unchanged src/img/globalnav-s47f9160579.png
write src/css/style.css (2.53s)
write src/css/style.css.map
Done, without errors.
“`
その他の新しいオプションは、ひとまずこのあたりを探りながらでしょうか。
> * [Sourcemap support · Issue #1108 · Compass/compass](https://github.com/Compass/compass/issues/1108)
## Google Chrome
Google Chrome のバージョンは 37.0.2062.94 ですが、すでに Sourcemap に対応しています。
> * [Working with CSS Preprocessors – Google Chrome](https://developer.chrome.com/devtools/docs/css-preprocessors)
1. DevTools Settings を開き、General をクリック
2. Enable CSS source maps と Auto-reload generated CSS をチェック
> * [How to enable sourcemaps in Sass and Compass – clubmate.fi](http://clubmate.fi/how-to-enable-sourcemaps-in-sass-and-compass/)
とりあえず生成されたところまで。
こちらを見ながら、また確認します。
> * [SassのデバッグにSource Mapsを使うべきたくさんの理由 | Dress Cording](http://dresscording.com/blog/sass/sass_sourcemaps.html)
[/markdown]