GULPで画像イメージを圧縮して最適化する方法とキャッシュコントロール

2021年7月28日GULP

GULPで画像イメージを圧縮して最適化する方法を紹介します。
また、画像圧縮は時間がかかるので、合わせてキャッシュコントロールの方法を紹介します。

GULPで画像イメージを圧縮して最適化する手順

• gulp-imageminをインストール
• gulpfile.jsに記述

gulp-imageminをインストール

npm i gulp-imagemin --save-dev
or
yarn add gulp-imagemin -D

上のコマンドでインストールします。

gulpfile.jsに記述

const imagemin = require('gulp-imagemin');
// Images optimization
gulp.task('imagemin', function () {
  return gulp
    .src('./src/img/**/*.+(png|jpg|jpeg|gif|svg)')
    .pipe(imagemin()) //imageを最適化
    .pipe(gulp.dest('./dist/img/'));
});

+でファイル形式を複数指定することができます。
区切りは|(パイプライン)を使います。
これで、gulp imageminを実行すると画像が圧縮されますが、
圧縮するたびに時間がかかるので、キャッシュを利用すると、大幅に時間の節約になります。

キャッシュをコントロールする手順

• gulp-cacheをインストール
• gulpfile.jsに記述

gulp-imageminをインストール

npm i gulp-cache -D
or
yarn add gulp-cache -D

上のコマンドでインストールします。

gulpfile.jsに記述

const imagemin = require('gulp-imagemin');
const cache = require('gulp-cache');
// Images optimization
gulp.task('imagemin', function () {
  return gulp
    .src('./src/img/**/*.+(png|jpg|jpeg|gif|svg)')
    .pipe(cache(imagemin())) //imageを最適化、キャッシュを利用
    .pipe(gulp.dest('./dist/img/'));
});

cacheを利用したい部分に上記のようにして適用することができます。

画像の最適化を変更検知に組み込む

const gulp = require('gulp');
const browserSync = require('browser-sync').create();

const imagemin = require('gulp-imagemin');
const cache = require('gulp-cache');


// Images optimization
gulp.task('imagemin', function () {
  return gulp
    .src('./src/img/**/*.+(png|jpg|jpeg|gif|svg)')
    .pipe(cache(imagemin())) //imageを最適化、キャッシュを利用
    .pipe(gulp.dest('./dist/img/'));
});

// Watch changes and browser-sync
gulp.task('watch', function () {
  // browser-sync
  browserSync.init({
    server: {
      baseDir: './', //index.htmlをrootにおいている場合。
    },
    browser: 'google chrome', // firefox developer editionなども可能
  });
  // watch changes
  gulp
    .watch(
      [
        './src/sass/**/*.scss',
        '**/*.html',
        './src/js/**/*.js',
        './src/img/**/*.+(png|jpg|jpeg|gif|svg)',
      ],
      gulp.series(['sass', 'javascript', 'imagemin'])
    )
    .on('change', browserSync.reload);
});

watchにファイルのパスを指定するのと、seriesに追加します。

キャッシュをクリアする方法

// キャッシュのクリア
gulp.task('clear-cache', function (done) {
  return cache.clearAll(done);
});

上のようにするとキャッシュをクリアすることができます。