@masatomakino/gulptask-imagemin

v0.4.1

4 months ago

imagemin task for gulp.js

Downloads

imagemin task for gulp.js

gulp4 用のタスクをモジュール化したものです。 Sharpを利用して、画像ファイルの最適化を行います。

タスクモジュールは

$ npm install @masatomakino/gulptask-imagemin -D

でインストールします

gulpfile.js の中で

▼gulpfile.js

const imageTasks = require("@masatomakino/gulptask-imagemin").generateTasks(
  "画像ソースのディレクトリ",
  "出力先ディレクトリ",
  { オプション: 省略可 }
);

のように宣言してタスクモジュールをインポートします。 imageTasksには画像最適化を行うoptimizeタスクと、ファイル更新を監視するwatchImagesタスクの 2 つが格納されています。

▼gulpfile.js

imageTasks.optimize; //画像最適化タスク
imageTasks.watchImages(); //watchタスク、gulpfileのwatch内で実行する

第三引数のオプションは省略可能です。デフォルトでは以下のように指定されています。

{
  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 なら一辺が半分のサイズの画像が出力されます。

このモジュールは、コマンドラインからも実行できます。

$ npx @masatomakino/gulptask-imagemin --src 画像ソースのディレクトリ --dest 出力先ディレクトリ

拡大率はオプションで指定します。

--scales 'postfix1',1.0/'postfix2',0.5

オプションは文字列と数値を組み合わせた配列です。1 つのスケールオプションが'postfix',1.0のように,で区切られています。各オプションは/で区切られています。