npm run imageminで画像を圧縮 | gulp使わず済ませたい

プログラミング勉強

最近sassのコンパイルをvsCodeのプラグインに頼っていたらgulpを触らない日々が続き、しばらくぶりにgulpを。。。と思っても腰が重い。できればgulp触りたくない。

でも結局は何かを使わねばいけないので、npmでやってみることにしました。とりあえず画像圧縮だけ。

今回はwatchさせないけど、次は最初から取り入れてみます。

npmで画像圧縮

すでにnpmがインストールされている状態からのスタートです。

環境は

  • Mac
  • npm -v 6.4.1
  • node -v   v10.15.0

となっています。

参考サイト

まず参考にしたのはこちらのサイト

超簡単!imageminで画像圧縮のタスクを作ってみる【拡張子全部乗せ2018】

詳しく書いてあるので大まかな流れは上記記事を参考にすれば大丈夫と思うのですが、

2018年の記事だからかそのままのコードではうまくいきませんでした。

フォルダ名を自分の環境に合わせて変更したとき間違えたのかなー?と見直したりもしましたが特におかしな部分も見当たらず。

ということでご本家のimagemin – npm をチェック。

最終的な index.js のコード

本家サイトに沿って一部修正。以下のコードできちんと動作しました。

 
const imagemin = require('imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');
const imageminPngquant = require('imagemin-pngquant');
const imageminGifsicle = require('imagemin-gifsicle');
const imageminSvgo = require('imagemin-svgo');

imagemin(['img/*.{jpg,png,gif,svg}'], { //第二引数 'dest', を削除
destination: 'dest', //この行を追加
plugins: [
imageminMozjpeg({ quality: 80 }),
imageminPngquant({ quality: [0.6, 0.8] }), // '65-80' はエラーに
imageminGifsicle(),
imageminSvgo()
]
}).then(() => {
console.log('Images optimized!');
});

私の場合はimgフォルダからdestフォルダへの吐き出しという設定になっていますので、適宜環境に合わせて修正していただければ。

動作確認

npm run imagemin

できちんとdestファイルに吐き出されました!

 

エラーが出てくれたらまだ修正点を探せるのに、quality: [0.6, 0.8] の部分以外はエラーにならなかったのでどうしたものかと思いました。

が、無事動作してよかったよかった。

タイトルとURLをコピーしました