grunt-data-uri 作ってnpm登録してみた

grunt-data-uri

cssの中身を正規表現で漁って、データURIに変換するよ君。htmlを対象とした処理は、そのうち追加する。

• ahomu/grunt-data-uri

DataURIへの変換系タスクで、なかなかちょうどよい使い勝手のものがなかったので自作しました。npmにおいて、名前争奪合戦の様相を呈している、grunt-task系ですがなぜかgrunt-data-uriが空いていました。

もしかして、海外では、画像をDataURIに変換して埋め込む、という手法がdata-uriという呼称伴わずに使われてるのかしら

npmデビューしたかったんや！

@t32k 氏が CSSO of grunt plugin | en.t32k.me を作っていたのに触発されまして。npm adduserして、npm publishするだけ。

---

良いところ

• 0.3.xはもちろん、開発ブランチ（devel）の0.4.0aでも動く
• url()というフォーマットで書かれていればminifyしてようが、sass, lessの状態であろうが処理できる
• ディレクトリ単位で変換対象の画像を指定できるので、ディレクトリベースの管理をしやすい
• css/raw/main.css -> css/main.css のような出力時、DataURIにしない画像への相対パスを自動で調整する
  • 1階層浅くする ../../image.png -> ../image.png
  • 1階層深くする ../../image.png -> ../../../image.png
  • みたいな。使うと分かりまする。

使い方・設定方法など

大体こんな感じ。

% npm install grunt-data-uri

npmでok!

grunt.initConfig({
  // sample configuration
  dataUri: {
    dist: {
      // src file
      src: ['sample/css/raw/*.css'],
      // output dir
      dest: 'sample/css',
      options: {
        // specified files are only encoding
        target: ['sample/img/embed/*.*'],
        // adjust relative path?
        fixDirLevel: true
      }
    }
  }
}

詳しくは、READMEをご覧くださいませ。

---