イナヅマTVログ

Gulp 始めてみましたのメモ – 7 – Data URI, Base64 Encode

| 0件のコメント

間は空きましたが gulp 使ってます。

画像データを埋めこみたい。
wikipedia: Data URI scheme

Gulp 始めてみましたのメモ – 1 – 導入からCompass
Gulp 始めてみましたのメモ – 2 – CSSをminify
Gulp 始めてみましたのメモ – 3 – JavaScriptをconcat, minify, source mapとYUIDoc
Gulp 始めてみましたのメモ – 4 – taskを順に実行
Gulp 始めてみましたのメモ – 5 – コピーと削除, ファイル・ディレクトリ
Gulp 始めてみましたのメモ – 6 – Globbing patterns, Glob options
の続き。

CSS

CSS 用の gulp plugin は直ぐに見つかった。
gulp-base64

こんな風に使うらしい。

gulp.task('build', function () {
  return gulp.src('./css/*.css')
    .pipe(base64({
        baseDir: 'public',
        extensions: ['svg', 'png', /\.jpg#datauri$/i],
        exclude:    [/\.server\.(com|net)\/dynamic\//, '--live.jpg'],
        maxImageSize: 8*1024, // bytes 
        debug: true
    }))
    .pipe(concat('main.css'))
    .pipe(gulp.dest('./public/css'));
});

HTML

需要無いのか、探し方が悪いのか良さげなプラグインが見つからない。

gulp-img64
見つけたけど、ちょっと使い勝手が悪い。

う〜〜ん…

Grunt Image Embed

gulp-base64 は grunt plugin “Grunt Image Embed” を使用していました。
github: grunt-image-embed

grunt プラグインも使えるのね。
参考にさせてもらっていつか作ってみよっと。

コメントを残す