Supertrue walfo

Gulp, 画像の処理

Gulp での画像処理について。
gulp-imagemin や gulp-cache を使った圧縮。

概要

  • フォルダに置いたら圧縮したい
  • 画像が編集されたら圧縮したい
  • 元データは常に残したい
  • 元データがリネームされたら圧縮済みのデータもリネームしたい

ディクレクトリ構造

 .
 ├── src
 │   └── images
 │       └── a.png (raw)
---✂----------------------
 └── dist
     └── images
         └── a.png (min)
フォルダ 説明
src/images 元データの保管と変更の監視
dist/images 処理済みのデータ

実装

var gulp = require('gulp');
var pngquant = require('imagemin-pngquant');
var gulpLoadPlugins = require('gulp-load-plugins');

var $ = gulpLoadPlugins();
//  ├── gulp-imagemin
//  ├── gulp-cache
//  └── gulp-plumber


gulp.task('image', function() {
  return gulp.src('src/images/**/*')
    .pipe($.plumber())
    .pipe($.cache($.imagemin({
      progressive: true,
      interlaced: true,
      use: [pngquant({quality: '65-80', speed: 4})]
    })))
    .pipe(gulp.dest('dist/images'));
});

残された課題

  • gulp-cache はリネームを「変更」とみなしてくれず反映されない。

リンク

つづく

2015年7月10日 12:12
2015年7月10日 14:43 編集済み