今夜はロールバック!

ただの日記です。

TOP

Gulpで画像サイズを変更する方法

f:id:momogaaaa:20180707150216p:plain

Gulpでgulp-image-resizeを使って、画像の縦横サイズを変更する方法。

この記事では画像圧縮のやり方は記載していない。

 

Gulpが使えるように設定する。

まずは適当なディレクトリを作成して、そのディレクトリ直下で以下のコマンドを実行して、Gulpが使えるようする。

npm init -y npm
install -D gulp

そして、そのディレクトリ直下に、gulpfile.jsファイルを作成する。

 

gulp-image-resizeが使えるように設定する。

今回は、画像サイズを変更するためにgulp-image-resizeを使う。したがって、このライブラリが使えるように以下を実行する必要がある。

npm install -D gulp-image-resize

その後、imagemagickかgraphicsmagickをインストールする必要がある。

 

ちなにみ、imagemagickを入れてみたが、うまく動作しなかったので、今回はgraphicsmagickを入れるように設定していく。

brew install graphicsmagick

補足

imagemagickを入れて試してみたが、画像サイズ変更のコマンドを実行したときに、以下のエラーが発生した。

Error: Error: Could not execute GraphicsMagick/ImageMagick: gm "identify" "-ping" "-format" "%wx%h" "-" this most likely means the gm/convert binaries can't be found

以下の掲示板に載っている方法を試してみたが、結局は動作しなかったため、graphicsmagickを使用するように変更。

The gm/convert binaries can't be found · Issue #455 · aheckmann/gm · GitHub

 

gulpfile.jsの編集

さきほど作成したgulpfile.jsへ以下のコードを貼りつける。

内容は、画像サイズが変更することができるように、画像サイズなどのオプションを定義していっている

var gulp = require('gulp');
var imageResize = require('gulp-image-resize');
 
gulp.task('default', function () {
  gulp.src('test.png')
    .pipe(imageResize({
      width : 100,
      height : 100,
      crop : true,
      upscale : false
    }))
    .pipe(gulp.dest('dist'));
});

こちらのコードは、 gulp-image-resize公式ページから引用したものだ。

www.npmjs.com

 

Gulpを実行

gulpfile.jsと同じ階層に、test.pngファイルを置いて、以下のコマンドを実行すれば、リサイズされたファイルがdistディレクトリ配下に出力される。

npx gulp

 

サンプルコード

gulp-image-resizeを使って、画像サイズを変更するコードを作成したので公開。

サンプルコード

使い方は、まずは上記のコードをダウンロードして、img-originalへ画像ファイルを入れ、その後は以下コマンドを実行するとimg-resizeフォルダへリサイズされた画像が出力される。

npm install
brew install graphicsmagick
npx gulp resize

 npmやnpx、brewについては、別途Googleにて検索すること。

 

さいごに

gulp-image-resizeは、リサイズ以外にもファイル種類の変換もできるようなので色々と試してみたい。

今回、imagemagickが使えなかったのは残念。いつかはこの現象を解消したいものだ。