6
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-11-28

#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']);
};

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

grunt
6
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?