画像のリサイズのために未だにGulpを使ってる

Gulpと言うと、数年前に開発プロセスを高速化するために流行ったのを覚えてる。Gulpを3Pdependencyと組み合わせることで、画像のリサイズや自動ページリロード、自動デプロイなどなど便利なことができてしまう。今ならそのほとんどの機能はwebpackで代用することができてしまうが、個人的には画像のリサイズは未だにGulpが便利なので使用している。 ここ数年は画像をいじる機会がなかったが、昨日突如その機会ができてしまったので改めて設定し直した。その設定プロセスやハマったエラーなどについてシェアする。 ます、過去に作成したgulpfile.jsをそのまま使えると思い、terminalでgulpを実行するとgulpは定義されてないと早速エラーが吐き出された。なので、gulp-cliをインストールしたわけだが、そうすると cannot read property 'apply' of undefined gulpとエラーが出た。まずはcliがインストールできない状態になっているので、対処するために npm uninstall gulp --global npm uninstall gulp-cli --global を実行。 その後、npm install --global gulp-cliを実行することでgulp-cliを再インストールができた。なお、この時にインストールしたバージョンはそれぞれ "gulp": "^4.0.2", "gulp-cli": "^2.3.0"

これでterminal上でgulpコマンドを認識できるようになったので、実際にtaskを作成していく。 今回の目的は画像のリサイズなので、リサイズと最適化で画像のバイトサイズを行う。 外部パッケージとしては、以下を使用。 "gulp-image-resize": "^0.13.1", "gulp-image": "^6.2.1"

実装コードは、 const { gulp, task, series, src, dest } = require("gulp"); const imageResize = require("gulp-image-resize"); const image = require("gulp-image");

function resize() { return src("img/*.png") .pipe(imageResize()) .pipe( imageResize({ width: 239, height: 180, crop: true, upscale: false, }) ) .pipe(dest("dist/")); }

function optimize() { return src(["img/*.png"]) .pipe( image({ optimizationLevel: 5, progressive: true, interlaced: true, }) ) .pipe(dest("dist/")); }

exports.default = series(resize, optimize);

で無事に画像のリサイズと最適化が行えました。