Gruntで画像の容量削減処理を自動化する方法

ミミウサ
ミミウサ

大量の画像ファイルをまとめて軽くする方法ないですか?

画像の容量を減らしたり、最適化するときに、tinypng.comを使っていました。

500枚以上の画像を軽くする必要がある案件に遭遇。

Node.jsにGruntという画像をまとめて最適化するモジュールがあるとのことなので、試してみました。

私はNode.jsは初心者ですが、Gruntを以下の手順でインストールと実行するだけだったので、思ったより簡単でした。

Gruntで画像処理

1..Node.jsをインストールする。

公式サイトからインストール。GruntはNode.jsを必要とするため。

2. grunt-cliをインストール

$ npm install grunt-cli -g

 

3. Grunt本体をインストール

4. 適当なディレクトリを作成し移動

$ mkdir grunt-test
$cd grunt-test
$npm init

5. 色々聞いてくるけどすべてYes

6. gruntインストール

$npm install grunt --save-dev

 

7. モジュールをインストール

$ npm install --save-dev grunt-image
$ npm install --save-dev grunt-contrib-watch

8. ”Gruntfile.js”作成

このファイルにGruntに処理してほしい内容を記載する。

 

module.exports = function (grunt) { 
   grunt.initConfig({ 
      image: { 
        static: { 
        files: { } 
        }, 
        dynamic: { 
           files: [{ 
             expand: true, 
             cwd: 'src/', 
             src: ['**/*.{png,jpg,gif,svg}'], 
             dest: 'dist/' 
           }] 
        } 
  }, 
  watch: { 
     images: { cwd: 'src/', 
     files: ['**/*.{png,jpg,gif,svg}'], 
     tasks: ['image'] 
     }, 
  } 
}); 
grunt.loadNpmTasks('grunt-contrib-watch'); 
grunt.loadNpmTasks('grunt-image');

9.$grunt watch で実行してみる

waiting..となり待機状態になる。

10. srcフォルダに処理したいファイルを入れる。

次々と処理が完了し、distフォルダにコピーされます。

 

11. 処理前srcフォルダと処理後distフォルダ。

容量が削減され、しかも処理がすばやく、素晴らしい!

まとめ

Node.jsのモジュール、Gruntで画像をまとめて最適化する手順についてご紹介してきました。

初心者の私でも可能な方法でしたので、まだ試したことのない方は是非トライしてみてくださいね。

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