[gulp] 画像サイズを減らす

2016-08-21

gulpを使って画像のサイズを減らす

今回のgulpスクリプトは画像ファイルのサイズ圧縮である。サイトの表示速度アップのために画像の見た目はあまり変わらないままにサイズを減らしてみる。なお今回の記事、単にgulp-imageminを使っているだけである。特に圧縮率を変更したりはしていないので、あまり参考にならないかもしれない。

gulp自体の設定については下記の記事参照。

gulpの初期設定

フォルダの構成

以下はあるプロジェクトフォルダである。今までの記事と同様に、src/imagesの画像ファイルをサイズ縮小して、app/imagesに出力してみる。

project_folder
├── 📁app
│   └── 📁images
├── 📁gulp
│   ├── config.coffee
│   └── 📁tasks
│       ├── imagemin.coffee
│            :
├── gulpfile.coffee
├── 📁node_modules
├── package.json
└── 📁src
    └── 📁images

画像圧縮スクリプト

インストールするnpmモジュール

スクリプトの実行に必要なnpmモジュールをインストールしておく。

npm i fs gulp-imagemin gulp-plumber -D`

gulp/tasks/imagemin.coffee

gulp/tasks.imagemin.coffee

 1fs = require('fs')
 2gulp = require('gulp')
 3imagemin = require('gulp-imagemin')
 4plumber = require('gulp-plumber')
 5config = require('../config')
 6
 7gulp.task 'imagemin', ->
 8  files = fs.readdirSync(config.src + '/images')
 9  baseFiles = files.filter((file) ->
10    return fs.statSync(config.src + '/images/' + file).isFile() && /.*\.png$/.test(file) && file != 'favicon.png'
11  )
12  .map((file) ->
13    return config.src + '/images/' + file
14  )
15
16  gulp.src(baseFiles)
17  .pipe(plumber({
18    errorHandler: (err) ->
19      console.log(err.messageFormatted);
20      @emit('end')
21  }))
22  .pipe(imagemin())
23  .pipe(gulp.dest(config.dest + '/images'))

上記の例では、最初にsrc/imagesにある、pngファイルの一覧を作成している。
また、imagesにfavicon.pngがある場合は除外している。
- faviconは別途、[gulp] favicon編で変換している。

imagemin実行

1$ gulp imagemin
2
3[hh:mm:ss] Requiring external module coffee-script/register
4(node:93202) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
5[hh:mm:ss] Using gulpfile project_folder/gulpfile.coffee
6[hh:mm:ss] Starting 'imagemin'...
7[hh:mm:ss] Finished 'imagemin' after ### ms
8[hh:mm:ss] gulp-imagemin: Minified ## images (saved ###.## kB - ##.#%)