#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.jsmodule.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']); };
###2-1-4.実行する
Gruntを実行してください。
これで、「images」ディレクトリのファイルが更新されるたび、
「dist/images」ディレクトリに最適化された画像が入ります。
grunt