gulptask-imagemin
imagemin task for gulp.js
gulp4 用のタスクをモジュール化したものです。 Sharpを利用して、画像ファイルの最適化を行います。
Getting Started
Install
タスクモジュールは
$ npm install @masatomakino/gulptask-imagemin -D
でインストールします
Import
gulpfile.js の中で
▼gulpfile.js
const imageTasks = require("@masatomakino/gulptask-imagemin").generateTasks(
"画像ソースのディレクトリ",
"出力先ディレクトリ",
{ オプション: 省略可 }
);
のように宣言してタスクモジュールをインポートします。
imageTasks
には画像最適化を行うoptimize
タスクと、ファイル更新を監視するwatchImages
タスクの 2 つが格納されています。
▼gulpfile.js
imageTasks.optimize; //画像最適化タスク
imageTasks.watchImages(); //watchタスク、gulpfileのwatch内で実行する
Option
第三引数のオプションは省略可能です。デフォルトでは以下のように指定されています。
{
scaleOptions: [
{
postfix: "",
scale: 1.0,
},
{
postfix: "_xs",
scale: 0.5,
},
];
}
-
option.scaleOptions
スケーリングに関する設定が格納された配列です。 -
ScaleOption.postfix
拡大縮小された画像を格納するディレクトリ名の接尾名です。たとえばオリジナルの画像ディレクトリがimg
、postfix が_xs
なら、出力ディレクトリはimg_xs
になります。 -
ScaleOption.scale
拡大縮小率です。1.0 ならオリジナルと同じサイズが、0.5 なら一辺が半分のサイズの画像が出力されます。
CLI
このモジュールは、コマンドラインからも実行できます。
$ npx @masatomakino/gulptask-imagemin --src 画像ソースのディレクトリ --dest 出力先ディレクトリ
拡大率はオプションで指定します。
--scales 'postfix1',1.0/'postfix2',0.5
オプションは文字列と数値を組み合わせた配列です。1 つのスケールオプションが'postfix',1.0
のように,
で区切られています。各オプションは/
で区切られています。