タスクランナーGulpを導入＆画像圧縮（初心者忘備録）

※noteも技術もすべてが初心者です。下書きレベルでの公開をおゆるしください。

そもそも、タスクランナーとは何？

「タスクランナー」は、タスクを自動化するツール。
Sassのコンパイルや、画像圧縮が自動化されるので、Web制作の時間短縮になる。gulpはNode.jsをベースに作られたタスクランナー。

【事前確認】node.js、npmはインストール済み

現在の設定
node -v  →　ｖ20.12.2
npm -v →　 10.5.0

gulpフォルダを作成

src,distと同じ階層に作った。（どこがいいとかあるの？）
名前は何でもいいが、あとで変えようとしてもrenameエラーになったりしてすぐできないので、とりあえず汎用的な名前でつくる

cd でgulpフォルダに移動

主目的：画像圧縮を自動でしたい。下記をインストールする。   

今のgulpバージョン（gulp5）に対応した情報があまりなく、こちらを参考に。大変助かりました。ありがとうございます！
参考url    https://t3l.org/web/1929 

npm i を実行してアプリをインストール

package.json の中に記載しているアプリがインストールされる

package.json

{
  "name": "gulp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "gulp": "^5.0.0",
    "gulp-changed": "^5.0.2",
    "gulp-notify": "^4.0.0",
    "gulp-plumber": "^1.2.1",
    "gulp-rename": "^2.0.0",
    "imagemin-mozjpeg": "^10.0.0",
    "imagemin-optipng": "^8.0.0",
    "imagemin-pngquant": "^10.0.0",
    "rename": "^1.0.4"
  },
  "devDependencies": {
    "gulp-imagemin": "^9.1.0"
  }
}

node_modulesとpackage-lock.jsonが作成されたのを確認

node_modulesには作成されたアプリが入ってる。
package-lock.jsonはどんなアプリを入れたかを記録として残してある。

gulpfile.js　

//Gulp5で自動画像 圧縮
//参考  https://t3l.org/web/1929

import gulp from 'gulp';  // gulpをインポート
const { series, src, dest, watch } = gulp; // series, src, dest, watchがそのまま使えるように

// プラグインのインポート
import plumber from 'gulp-plumber'; // エラーが発生してもタスクを停止しない
import notify from 'gulp-notify'; // エラー発生時にデスクトップ通知を行う
import imagemin from 'gulp-imagemin'; // 画像ファイルを圧縮する
import mozjpeg from 'imagemin-mozjpeg'; // JPEG画像を圧縮する
import pngquant from 'imagemin-pngquant'; // PNG画像を圧縮する
import rename from 'gulp-rename'; // ファイル名を変更する
import log from 'fancy-log'; // ログを抑制するためのモジュール
import path from 'path'; // パス操作用
import through from 'through2'; // ストリーム操作用

let totalSizeBefore = 0;
let totalSizeAfter = 0;

// 参照元パス
const srcPath = {
  img: '../src/images/**/*.{png,jpg,gif,svg}', // 画像ファイルのソース
};

// 出力先パス
const destPath = {
  img: '../dist/assets/images/', // 画像ファイルの出力先
};

// 画像を圧縮するタスク
const compressImages = () => (
  src(srcPath.img, { encoding: false }) // 画像ファイルのソース
    .pipe(plumber({
      errorHandler: (err) => {
        notify.onError({
          title: `Gulp error in ${err.plugin}`,
          message: err.toString()
        })(err);
      }
    })) // エラー時に通知
    .pipe(through.obj(function(file, enc, cb) {
      totalSizeBefore += file.stat.size; // 圧縮前のファイルサイズを累積
      const sizeMB = file.stat.size / (1024 * 1024); // ファイルサイズをMB単位で取得
      let imageminPlugins;
      if (sizeMB > 2) { // 2MB以上のファイル
        imageminPlugins = [
          mozjpeg({ quality: 50, progressive: true }), // JPEGの圧縮
          pngquant({ quality: [0.4, 0.5] }), // PNGの圧縮
        ];
      } else if (sizeMB > 1) { // 1MB以上2MB未満のファイル
        imageminPlugins = [
          mozjpeg({ quality: 65, progressive: true }), // JPEGの圧縮
          pngquant({ quality: [0.5, 0.6] }) // PNGの圧縮
        ];
      } else { // 1MB未満のファイル
        imageminPlugins = [
          mozjpeg({ quality: 75, progressive: true }), // JPEGの圧縮
          pngquant({ quality: [0.6, 0.8] }) // PNGの圧縮
        ];
      }

      gulp.src(file.path, { encoding: false })
        .pipe(imagemin(imageminPlugins, { verbose: false })) // verbose: false で詳細なログを抑制
        .pipe(rename((filePath) => {
          filePath.dirname = path.relative(file.base, path.dirname(file.path)); // 元のディレクトリ構造を保持
        }))
        .pipe(dest(destPath.img))
        .on('data', (data) => {
          totalSizeAfter += data.stat.size; // 圧縮後のファイルサイズを累積
        })
        .on('end', () => cb());
    }))
);

// 画像処理タスクを一つにまとめる
const imgTask = series(compressImages, (done) => {
  const totalReduction = ((totalSizeBefore - totalSizeAfter) / totalSizeBefore) * 100;
  log.info(`Total size before compression: ${(totalSizeBefore / (1024 * 1024)).toFixed(2)} MB`);
  log.info(`Total size after compression: ${(totalSizeAfter / (1024 * 1024)).toFixed(2)} MB`);
  log.info(`Total size reduction: ${((totalSizeBefore - totalSizeAfter) / (1024 * 1024)).toFixed(2)} MB`);
  log.info(`Total size reduction percentage: ${totalReduction.toFixed(2)}%`);
  done();
});

// ファイルの変更を監視するタスク
const watchFiles = (done) => {
  watch(srcPath.img, imgTask); // 画像ファイルが変更されたら圧縮する
  done();
};

// デフォルトタスク（Gulpを実行した際に動くタスク）
export default series(imgTask, watchFiles);

「npx gulp」とコマンドを打つと動き出す

何回か●●のパッケージがないよと言われたので、その都度インストールしてみた。
コマンド： npm install [パッケージ名]

画像ファイルを追加したり名前を変えると自動でdist内も変更される(嬉)
（削除は今のところ手動）

止めるときは ctrl + c　

※フォルダ（in,outどちらも）は案件次第で変えるかも。

【参考】現在のフォルダ構成

現在のフォルダ構成 2024/07/15

新しいプロジェクトで作るときは、
package.jsonファイルとgulpfile.jsファイルだけコピーして
npm i と npx gulp　すれば同様に使える。

自動化ってなんて楽なの

画像圧縮って地味に面倒なので、導入して本当に楽になりました。
他にもいろいろ導入してみたいです。