「Gulp」カテゴリーアーカイブ

【Gulp】GulpでPNGとJPEGを圧縮する

以前、鹿野さんが書いた下記の記事をベースに作ったものをPNG,JPEGの両方に対応するように作り直してみたメモ。

5分で導入! タスクランナーGulpでWeb制作を効率化しよう – ICS MEDIA

全体的な解説は鹿野さんの記事に詳しいので、ここでは変更点のみ記します。

・PNGの圧縮は、imagemin-pngquan を使う方がいいらしいので、こっちを追加。以下のコマンドで該当フォルダにインストール。

npm install --save-dev imagemin-pngquan

・JPEGの圧縮は、imagemin-mozjpeg を使うため追加。以下のコマンドで該当フォルダにインストール。

npm install --save-dev imagemin-mozjpeg

※ちなみに「–save-dev」はinstallしたlibraryの情報を自動でpackage.jsonに書いてくれるオプションです。
npmでnode.jsのpackageを管理する – Qiita

・複数の拡張子を指定するには、{} で囲めばいいらしい(gulpfile.js 11行目)。

・PNG,JPEG共に圧縮設定を追加(gulpfile.js 12-25行目)。

これらを書き足したコードが以下です。

・gulpfile.js(全文)

// gulpプラグインの読みこみ
var gulp = require('gulp');

// 画像を圧縮するプラグインの読み込み
var imagemin = require("gulp-imagemin");
var pngquant  = require('imagemin-pngquant');
var mozjpeg  = require('imagemin-mozjpeg');

// imagesフォルダのpng,jpg画像を圧縮して、minified_imageフォルダに保存する
gulp.task("imageMinTask", function() {  // 「imageMinTask」という名前のタスクを登録
    gulp.src("images/*.{png,jpg}")    // imagesフォルダ以下のpng,jpg画像を取得
    .pipe(imagemin([
       pngquant({
         quality: '65-80',
         speed: 1,
         floyd:0
       }),
       mozjpeg({
         quality:85,
         progressive: true
       }),
       imagemin.svgo(),
       imagemin.optipng(),
       imagemin.gifsicle()
     ]
        ))   // 画像の圧縮処理
        .pipe(gulp.dest("minified_image/"));    //保存
});

実際に圧縮してみた結果は、こんな感じでした。

・PNG
(圧縮前)2534 × 3490 ピクセル 2.9 MB(2,854,228 バイト)
(圧縮後)2534 × 3490 ピクセル 1.6 MB(1,555,755 バイト)> 約55%に圧縮

・JPEG
(圧縮前)3024 × 4032 ピクセル 6.3 MB(6,335,114 バイト)
(圧縮後)3024 × 4032 ピクセル 1 MB(1,032,033 バイト)> 約16%に圧縮

【参考】
Gulpでpngquantを使ってPNGの減色&軽量化 – Qiita
gulp-imageminのプラグインによる最適化が機能しない際の対処 – Qiita

【node.js】node.js,npm,bower,gulpなどの諸々

最近この辺使うので、とりあえず個人的なリンクのまとめ。

・node.js,npm関連
npm自体のバージョンを上げる – Qiita
nodebrewでnodeとnpmのバージョン管理しよう(Mac編) | Webサプリ
Macにnode.jsを複数バージョン切り替えられるようにインストール – Qiita
nodebrewでnodeとnpmのバージョン管理しよう(Mac編) | Webサプリ
nodebrewで手軽にnode.jsバージョンアップ&バージョン切り替え – Qiita
Cordovaの環境構築 – Qiita

・bower関連
Bower(フロントエンド用パッケージマネージャー)の導入方法と使い方 | 株式会社LIG

・Gulp関連
5分で導入! タスクランナーGulpでWeb制作を効率化しよう – ICS MEDIA
ざっくりGulp.js入門(Mac向け) – Qiita
Gulpでpngquantを使ってPNGの減色&軽量化 – Qiita
gulp-imageminのプラグインによる最適化が機能しない際の対処 – Qiita

・ターミナル関連
Mac OS X ターミナルで別のボリュームへ移動するには?? – Qiita
必ず使える!Macのターミナルで使う基本UNIXコマンド15選 | NEZU.log