![見出し画像](https://assets.st-note.com/production/uploads/images/147370224/rectangle_large_type_2_a86f3566391ad2619f0574e2d6dd9b02.jpeg?width=1200)
タスクランナーGulpを導入&画像圧縮(初心者忘備録)
※noteも技術もすべてが初心者です。下書きレベルでの公開をおゆるしください。
そもそも、タスクランナーとは何?
「タスクランナー」は、タスクを自動化するツール。
Sassのコンパイルや、画像圧縮が自動化されるので、Web制作の時間短縮になる。gulpはNode.jsをベースに作られたタスクランナー。
【事前確認】node.js、npmはインストール済み
現在の設定
node -v → v20.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はどんなアプリを入れたかを記録として残してある。
//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どちらも)は案件次第で変えるかも。
【参考】現在のフォルダ構成
![](https://assets.st-note.com/img/1721031124812-6hZ6t8WGZQ.png)
新しいプロジェクトで作るときは、
package.jsonファイルとgulpfile.jsファイルだけコピーして
npm i と npx gulp すれば同様に使える。
自動化ってなんて楽なの
画像圧縮って地味に面倒なので、導入して本当に楽になりました。
他にもいろいろ導入してみたいです。