CSS

GruntでSassのsourceMapを出力

Sass 3.3でソースマップの出力に対応した事は知っていましたが、普段使っているGrunt(grunt-contrib-sassのVer.0.3.0)で上手く出力出来なかったので見送っていました。
その後、新しいプロジェクト始動時にふとGruntのパッケージを更新していると、grunt-contrib-sass 0.4.0でソースマップ出力に対応したとの情報を得たので試してみました。

ソースマップとは

SassやCoffeeScriptで記述していても公開/動作確認する時はコンパイルしたファイルを読み込むため、
デベロッパーツールでデバッグをするとコンパイル後のCSSやJSでの記述位置しか把握出来ませんでした。

そこでコンパイル後であっても、オリジナルソース(SassやCoffeeScript)の記述位置を表示する仕組みとしてソースマップが登場しました。
コンパイルするのと同時に元ファイルの記述位置を別ファイルに書き出すことで、デベロッパーツールにてオリジナルソースの記述位置が把握出来る仕組みです。

GruntでSassのソースマップ出力方法

Gruntfile.coffeeの設定例(Sass部分のみ抜粋)

開発用のsass:devと、公開用のsass:publicの2つ用意していますが、面倒な場合は常時sass:devで運用しても問題無いと思います。
※ソースマップを出力してもCSSファイルの末尾にソースマップのパスを記したコメントが追加されるだけなので読込時間の影響は少ないと考えられる

module.exports = ( grunt ) ->
  grunt.initConfig
    meta:
      banner: '/*! compile at <%= grunt.template.today("yyyy-mm-dd") %> */'
    
    sass:
      // 開発用ソースマップ出力あり 
      dev:
        options:
          sourcemap: true // ソースマップオプションを追記 
          style: 'compressed'
        files:
          'htdocs/common/css/min.css': 'htdocs/common/sass/base.scss'
      // 公開用ソースマップ出力無し&コンパイル日のコメント挿入 
      public:
        options:
          banner: '<%= meta.banner %>'
          style: 'compressed'
        files:
          'htdocs/common/css/min.css': 'htdocs/common/sass/base.scss'

ソースマップを確認する

Chrome 27以降のデベロッパーツールがソースマップの表示に対応していますが、初期設定では表示出来ないため設定が必要です。
簡単に設定方法を紹介しますが、Chromeのバージョンアップで名称が変わることがあるので適宜読み替えてください。

Chromeの設定方法
  1. アドレスバーにchrome://flags/と入力。
  2. 「デベロッパー ツールのテストを有効にする」の項目を探して有効にする。
  3. Chromeを再起動。
  4. デベロッパーツールを開いて右下の設定ボタン(歯車アイコン)をクリック。
  5. Generalの中の「Enable source map」にチェックを入れる。
  6. 続いてExperimentsの中の「Sass stylesheet debugging」にチェックを入れる。
  7. 再度Chromeを再起動。

以上の設定が完了したらソースマップをCSSと同じディレクトリに設置してブラウザで表示確認します。
下図のように.sassの行数が表示されるようになります。
図:デベロッパーツールのソースマップ表示例

上手くいかない時の確認事項

ソースマップが出力出来ない場合
  • GruntはVer.0.4.0以上か?
  • SassはVer.3.3以上か?
    2013年9月末現在、Ver.3.3はまだ正式版がリリースされていないので下記コマンドでインストールします。
    ※正式版ではないのでご注意ください。
    $ gem install sass --pre
  • grunt-contrib-sassはVer.0.4.0以上か?
  • 上記を直前にバージョンアップした場合はターミナルを再起動する。
デベロッパーツールでソースマップが表示されない場合
  • Chromeの設定を見直す。
  • ベーシック認証をかけているとChromeが.mapファイルへアクセス出来ないため表示出来ない。
  • 特定のサーバーで表示出来ない症状を確認しています。
    原因が定かではないですが、Audio要素のようにapacheにContent-Type(AddType text/css .map)を設定する事で改善可能?(未検証)
    傾向としてブラウザで.mapファイルを直接閲覧出来るサーバはソースマップが表示され、閲覧出来ないサーバはソースマップが表示されませんでした。
    →AWS、N社の共用サーバ、xamppのローカルサーバでは表示可能
    →K社の共用サーバでは表示不可

参考

HTML5を導入した制作の依頼・ご質問など、お気軽にお問合せください

※(株)インフォマークのお問合せフォームへ移動します。