3,172 views

この記事は最終更新から 2695日 が経過しています。

1. やりたいこと

JavaScriptファイルの更新を監視し、自動的に画像ファイルを minifyしたい。

2. やってみる！

(50) Node.js + gulpでcssファイルを自動圧縮 とほとんど同じだ。
ファイル変化検出時に実行するプログラムが異なるだけだ。

ローカルな作業環境に移動し Node.jsのパッケージ管理を初期化する。

$ npm init

gulp, gulp-imagemin をインストールする。

$ npm install -g gulp
$ npm install -D gulp
$ npm install -D gulp-imagemin
$ npm install -D gulp-changed
$ npm install -D imagemin-jpeg-recompress
$ npm install -D imagemin-pngquant
$ npm install -D imagemin-gifsicle

gulpfile.js を書く。
ファイルの変化検出は gulp.watch( 監視対象, 検出後実行タスク ) で実現する。
ここでは dirIn に置かれた画像ファイルを監視し、dirOut に変換後ファイルを出力するように書いた。
タスク名 minify-img, watch は何でもよい。
gulp.src()の引数には glob() のオプションを指定する。

var gulp = require('gulp');
var isChanged = require('gulp-changed');
var minifyImg = require('gulp-imagemin');
var minifyImg_JPG = require('imagemin-jpeg-recompress');
var minifyImg_PNG = require('imagemin-pngquant');
var minifyImg_GIF = require('imagemin-gifsicle');

gulp.task('minify-img', function() {
    gulp.src("dirIn/*.+(jpg|jpeg|png|gif)")
        .pipe(isChanged("dirOut"))
        .pipe(minifyImg([minifyImg_JPG(),minifyImg_PNG(),minifyImg_GIF()]))
        .pipe(gulp.dest("dirOut"));
});
gulp.task('watch', function() {
    gulp.watch("dirIn/*.*",['minify-img']);
});

実行！

gulp watch

dirInに画像ファイルを置くと、自動的に処理されて dirOutに出力されるようになった！

※おまけ
起動時に必ず１回タスクを実行したい場合は以下のように書く。

gulp.task('watch', ['minify-img'], function() {

3. 画像劣化なし？

下記の JPEG画像ファイルはサイズが半分以下になったが、劣化が見られない？
優秀だ…

画像Ａ (180KB)

画像Ｂ (393KB)

x. 参考情報

https://www.npmjs.com/package/imagemin-pngquant
https://qiita.com/sygnas/items/f6700c75df71b8888d80