gulp-imageminとpngquantで画像圧縮をするGulpファイル作ってみた

このエントリーをはてなブックマークに追加

gulp-imageminとpngquantで画像圧縮をするGulpファイル作ってみた

TinyPNGとかでちまちまやっているとかなり面倒なので一括でできるようにしたいなという事で作ってみました。

Ads

GitHubにあるのでご自由にお使いください

Takumi0901/img-min

やり方

npm install
images/src

上記に圧縮したい画像を入れる。

gulp img:min

これでimages/distの中に圧縮された画像が出来上がります。

srcの中の元画像はそのままなので、見比べてみて劣化等がなければ使う感じです。

コード

optimizationLevelqualityなどで品質を調整する事ができます。

var gulp     = require('gulp');
var imagemin = require('gulp-imagemin');
var imageminPngquant = require('imagemin-pngquant');

var paths = {
  srcDir : 'images/src',
  dstDir : 'images/dist'
}

gulp.task( 'min_jpg_gif_svg', function(){
  var srcGlob = paths.srcDir + '/**/*.+(jpg|gif|svg)';
  var dstGlob = paths.dstDir;
  var imageminOptions = {
    optimizationLevel: 7
  };

  gulp.src( srcGlob )
    .pipe(imagemin( imageminOptions ))
    .pipe(gulp.dest( dstGlob ));
});

gulp.task('min_png', function () {
    var srcGlob = paths.srcDir + '/**/*.png';
    var dstGlob = paths.dstDir;
    return gulp.src(srcGlob)
        .pipe(imageminPngquant({quality: '70-95', speed: 4})())
        .pipe(gulp.dest(dstGlob));
});

gulp.task('img:min', function(){
    gulp.run('min_jpg_gif_svg');
    gulp.run('min_png');
});

圧縮できる画像の種類

ほぼ全部いけます。

  • jpg
  • gif
  • svg
  • PNG

参考

イチマルニデザインブログをフォローしよう

イチマルニデザインブログではTwitterアカウントでWebに関する情報をつぶやいています。フォローすることで最新情報をすぐに受け取ることができます

いいなと思ったらシェアお願いします

このエントリーをはてなブックマークに追加

同じカテゴリーの記事

Ads
ページの先頭へ