Grunt 導入についてまとめ（node.js + npm @ windows)

1.Grunt導入にあたって ( Windows )

社内用にGrunt導入にあたっての手順書いていきます。

1-1.node.jsのインストール

下記URLを参考にnode.jsをインストールします。

http://qiita.com/roana0229/items/29232508e71559d0fd5f

2.パッケージをインストールするための下準備

@powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%systemdrive%\chocolatey\bin

3.Node.jsをインストール

cinst nodejs.install

4.Node.jsが正しくインストールされたか確認

node -v

1-2.Gruntのインストール

下記URL中ごろの「Gruntのインストール」を参考にGruntをインストールします。
実際には下記のみでOK

http://www.atmarkit.co.jp/ait/articles/1403/04/news020_2.html

% npm install -g grunt-cli

1-3.Gruntのモジュールをインストール

同じく上記URLを参考にGruntのモジュールをインストールしていきます。

http://www.atmarkit.co.jp/ait/articles/1403/04/news020_2.html

1-3-1.package.jsonを作成

% npm init

1-3-2.gruntモジュールを登録

% npm install grunt --save-dev

2.プラグイン等のインストールをする

下記URLを参考に進めてください。
http://www.atmarkit.co.jp/ait/articles/1404/08/news033.html

2-1.画像最適化

TinyPNGで、PNG・JPGを最適化、
grunt-contrib-imageminで、GIFを最適化していきます。

2-1-1.TinyPNGのAPIキーを取得

下記ページでAPIキーを取得してください。
無料ライセンスだと、1か月で500アイテムまで最適化できます。
https://tinypng.com/developers

2-1-2.プラグインをインストールする

npm install grunt-contrib-imagemin --save-dev
npm install grunt-tinypng --save-dev

2-1-3.Gruntに記述していきます。

Grunt用のソースは下記を参考に記述。
コード中の"APIキー"に「I」にて取得したAPIキーをいれます。

http://memo.sanographix.net/post/89148648990

Gruntfile.js

module.exports = function(grunt){
   grunt.loadNpmTasks("grunt-contrib-watch");
   grunt.loadNpmTasks('grunt-contrib-imagemin');
   grunt.loadNpmTasks('grunt-tinypng');
   grunt.initConfig({
       paths: {
           img: 'images/', //元画像
           imgdist: 'dist/images/' //出力先
       },
       imagemin: {
           dynamic: {
               files: [{
                   expand: true,
                   cwd: '<%= paths.img %>',
                   src: '**/*.{jpg,gif}',
                   dest: '<%= paths.imgdist %>'
               }]
           }
       },
       // tinypng
       tinypng: {
           options: {
               apiKey: "APIキー"
           },
           files: {
               expand: true,
               cwd: '<%= paths.img %>',
               src: '**/*.png',
               dest: '<%= paths.imgdist %>'
           }
       },
       // watch
       watch : {
           img : {
               files: ['<%= paths.img %>**/*.{png,jpg,gif}'],
               tasks: ['imagemin', 'tinypng']
           }
       }
   });
   grunt.registerTask('default', ['watch', 'imagemin', 'tinypng']);
};

https://github.com/gruntjs/grunt-contrib-imagemin

2-1-4.実行する

Gruntを実行してください。
これで、「images」ディレクトリのファイルが更新されるたび、
「dist/images」ディレクトリに最適化された画像が入ります。

grunt