SlideShare a Scribd company logo
WEBサイト・フロントエンドの高速化と
             grunt.jsについて


                @tomof




 1
13年2月8日金曜日
自己紹介
     • Twi)er	
  ID	
  :	
  @tomof 

     • 静岡のSolarisに超強い某社に勤めています。

     • jQueryの日本語リファレンスサイトを
       運営しています。
       h)p://js.studio-­‐kingdom.com/jquery



 2
13年2月8日金曜日
バージョンの違いに注意
     • この資料は0.3系を元に作成されています。
     • 0.3系から0.4系では、grunt.js	
  が	
  GrunDile.js	
  に
       変更されるなどの違いがあります。
     • 0.3と0.4の詳しい違いは下記を参照(英文)
       h)ps://github.com/gruntjs/grunt/wiki/
       Upgrading-­‐from-­‐0.3-­‐to-­‐0.4


 3
13年2月8日金曜日
フロントエンドの高速化
     • WEBサイトの高速化は
       バックエンドだけの課題じゃない!
     • HTTPのリクエストを減らそう!




       参考:h&p://www.inter-­‐office.co.jp/contents/177/


 4
13年2月8日金曜日
CSSスプライト
     • 数年前ぐらいから、HTML,CSSコーディングに
       おいては、導入して当然(?)の手法となった。


                   HTTPリクエスト	
  =	
     8
                   HTTPリクエスト	
  =	
     1
 5
13年2月8日金曜日
CSSやjsファイルも同じ!
     • 最近だと、jsやcssの
       ファイル数も増加!


     • jQueryプラグインを
       多数使用する場合も
       注意!

 6
13年2月8日金曜日
Chromeのツールで確認!
     • 0.5secだと、人は遅延を感じないらしい。
     • 0.2secスピードを上げるだけで売上に影響も?




 7
13年2月8日金曜日
jsやcssのファイルをビルドする
             開発                公開
                  \	
  ビルド!/



                               all.js




                  \	
  ビルド!/




                               all.css


 8
13年2月8日金曜日
ビルドがしてくれる事
     • Concat	
  	
  -­‐	
  連結
       複数のファイルを1つにまとめる。

     • Minify	
  	
  -­‐	
  圧縮
       コメントや改行を除去。変数名も短縮。

     • Lint	
  -­‐	
  文法チェック            難読化…
       文末のセミコロン抜けなどをチェック!
                                         Sass…
     • Unit	
  Test	
  -­‐	
  ユニットテスト Coffee	
  Script…
       エンバグやレベルダウンをチェック!                 他にも色々…
 9
13年2月8日金曜日
grunt.jsを試してみる




      • jQuery1.8でビルドツールとして採用。
      • 作成者がjQuery開発メンバーらしいです。
      • 他にRequireJSなどがあります。
 10
13年2月8日金曜日
jQueryのgruntを確認
       git clone git://github.com/jquery/jquery.git




       src               開発用のファイルを格納するフォルダ

       dist              コンパイルしたファイルの出力先



      grunt.js           grunt.jsファイル



      node_module        Node.jsのモジュール用のフォルダ

      package.json       Node.jsのバージョン管理等を指定するフォルダ



 11
13年2月8日金曜日
jQueryのgruntを確認

             連結されたファイル

             上記ファイルを圧縮

             開発時のファイル


                 grunt.js



 12
13年2月8日金曜日
jQueryのgruntを確認
             node_modules
             Node.jsのモジュールを
             格納するフォルダ


             pacage.json
             バージョン
             管理用のファイル



 13
13年2月8日金曜日
gruntことはじめ
      1.node.jsとgruntのインストール	
  
       いわゆる「黒い画面」を使います。(割愛)

      2.grunt.jsファイルの作成
       このファイルにタスクを記述。

      3.タスクをコマンドで実行
       タスクはビルド対象ファイル、作業内容、ビルド後の
       ファイル出力先などの指定します。


 14
13年2月8日金曜日
黒い画面が苦手な人用
      • CodeKit          h&p://incident57.com/codekit/


      • 25ドル




             Mac限定みたい…
             (´・ω・`)
 15
13年2月8日金曜日
CodeKitとGruntの比較
      h&p://havelog.ayumusato.com/develop/others/e524-­‐yeoman_and_brunch.html




 16
13年2月8日金曜日
簡単なサンプルで試してみる
      • サンプルフォルダとファイルを準備

         dist
                                /*	
  comment	
  */
                                funcRon	
  hoge(){
                                	
  	
  	
  	
  alert('hoge!');
             src
                   sample1.js   }


        grunt.js
                                /*	
  comment	
  */
                                funcRon	
  fuga(){
                                	
  	
  	
  	
  alert('fuga!');
                   sample2.js   }

 17
13年2月8日金曜日
簡単なサンプルで試してみる
      • サンプルフォルダとファイルを準備
                   module.exports	
  =	
  funcRon(grunt)	
  {
         dist      ...
                   	
  	
  	
  	
  grunt.initConfig({
                   	
  	
  	
  	
  	
  	
  	
  	
  concat:	
  {
             src   	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  built:	
  {
                   	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  src:	
  ['src/sample1.js',	
  'src/sample2.js'],
                   	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  dest:	
  'dist/built.js'
                   	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  }
        grunt.js
                   	
  	
  	
  	
  	
  	
  	
  	
  },
                   	
  	
  	
  	
  });
                   	
  	
  	
  	
  grunt.registerTask('build',	
  'concat');
                   }

 18
13年2月8日金曜日
簡単なサンプルで試してみる
       $	
  grunt	
  build	
  	
  	
  #コマンドを実行してbuilt.jsを生成


                                     /*
         dist                        	
  *	
  comment
                    built.js
                                     	
  */
                     生成              funcRon	
  hoge(){
             src                     	
  	
  	
  	
  alert('hoge!');
                                     }
                                     /*
                                     	
  *	
  comment
        grunt.js
                                     	
  */
                                     funcRon	
  fuga(){
                                     	
  	
  	
  	
  alert('fuga!');
                                     }

 19
13年2月8日金曜日
簡単なサンプルで試してみる
      • 先ほどのgrunt.jsにminifyを追加
                   module.exports	
  =	
  funcRon(grunt)	
  {
         dist      ...
                   	
  	
  	
  	
  grunt.initConfig({
                   	
  	
  	
  	
  	
  	
  	
  	
  concat:	
  {…	
  	
  	
  	
  },
             src   	
  	
  	
  	
  	
  	
  	
  	
  min:	
  {
                   	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  dist:	
  {
                   	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  src:	
  'dist/built.js',
                   	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  dest:	
  'dist/bilt.min.js'
        grunt.js
                   	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  }
                   	
  	
  	
  	
  	
  	
  	
  	
  },
                   	
  	
  	
  	
  });
                   	
  	
  	
  	
  grunt.registerTask('build',	
  'concat	
  min');
                   }
 20
13年2月8日金曜日
簡単なサンプルで試してみる
       $	
  grunt	
  build	
  	
  	
  #再度コマンドを実行してbuilt.min.jsを生成



         dist
                    built.js


             src


                                   funcRon	
  hoge(){alert("hoge!")}funcRon	
  fuga()
        grunt.js                   {alert("fuga!")};
                   built.min.js

                     生成




 21
13年2月8日金曜日
機能を拡張してみる
      • SCSSファイルのコンパイル機能をgruntに
        追加する。
      • 開発速度も高速化!




 22
13年2月8日金曜日
機能を拡張してみる
      • scssのファイルを準備
                                          $blue:	
  #3bbfce;
         css       scss                   $margin:	
  16px;
                           sample1.scss   .content-­‐navigaRon	
  {
                                          	
  	
  border-­‐color:	
  $blue;
                                          	
  	
  color:
                                          	
  	
  	
  	
  darken($blue,	
  9%); …(省略)


                                          table.hl	
  {
        grunt.js                          	
  	
  margin:	
  2em	
  0;
                          sample2.scss    	
  	
  td.ln	
  {
                                          	
  	
  	
  	
  text-­‐align:	
  right;
                                          	
  	
  }
                                          } …(省略)



 23
13年2月8日金曜日
機能を拡張してみる
       $npm	
  install	
  grunt-­‐sass #拡張機能をインストール

                          module.exports	
  =	
  funcRon(grunt){
         css              	
  	
  	
  	
  grunt.loadNpmTasks('grunt-­‐sass');	
  
                   scss
                          	
  	
  	
  	
  grunt.initConfig({
                          	
  	
  	
  	
  	
  	
  	
  	
  concat:	
  {…	
  	
  	
  	
  },
                          	
  	
  	
  	
  	
  	
  	
  	
  min:	
  {…	
  	
  	
  	
  },
                          	
  	
  	
  	
  	
  	
  	
  	
  sass:	
  {
                          	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  dist:	
  {
                          	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  files:	
  {'css/sample.css':	
  
                          	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  ['css/scss/sample1.scss',	
  'css/scss/sample2.scss']
        grunt.js          	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  }
                          	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  }
                          	
  	
  	
  	
  	
  	
  	
  	
  },
                          	
  	
  	
  	
  });
                          	
  	
  	
  	
  grunt.registerTask('build',	
  'concat	
  min');
                          	
  	
  	
  	
  grunt.registerTask('style',	
  'sass');
                          }
 24
13年2月8日金曜日
機能を拡張してみる
                                .content-­‐navigaRon	
  {
                                	
  	
  border-­‐color:	
  #3bbfce;
                                	
  	
  color:	
  #2ca2af;	
  }

         css         scss       .border	
  {
                                	
  	
  padding:	
  8px;
                                	
  	
  margin:	
  8px;
                                	
  	
  border-­‐color:	
  #3bbfce;	
  }

                                table.hl	
  {
                                	
  	
  margin:	
  2em	
  0;	
  }
                                	
  	
  table.hl	
  td.ln	
  {
        grunt.js   sample.css   	
  	
  	
  	
  text-­‐align:	
  right;	
  }

                    生成          li	
  {
                                	
  	
  font-­‐family:	
  serif;
                                	
  	
  font-­‐weight:	
  bold;
                                	
  	
  font-­‐size:	
  1.2em;	
  }

 25
13年2月8日金曜日
機能を拡張してみる
      • その他にも色々
        –	
  Data	
  URI	
     'data:image/png;base64,iVBORw0KGgoAAAANSUhEU



        –	
  Less
        –	
  CoffeeScript
        –	
  etc…                                  grunt.jsの公式サイトから探せます。




 26
13年2月8日金曜日
watchでファイルを監視

                      1. 監視対象を決定する
         css
                      2. 監視対象が更新された時に
             src       実行したいタスクを登録

                      3. watchコマンドを実行して監視を
        grunt.js       開始する。




 27
13年2月8日金曜日
watchでファイルを監視

                    module.exports	
  =	
  funcRon(grunt)	
  {...
         css        	
  	
  	
  	
  grunt.initConfig({…
                    	
  	
  	
  	
  	
  	
  	
  	
  watch:	
  {
                    	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  css:	
  {                                 cssの監視
             src    	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  files:['css/scss/*.scss'],
                    	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  tasks:	
  'sass'
                    	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  },
                    	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  js:	
  {                                  jsの監視
        grunt.js    	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  files:['src'],
                    	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  tasks:	
  'concat	
  min'
                    	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  }
                    	
  	
  	
  	
  	
  	
  	
  	
  },
                    	
  	
  	
  	
  …});
                    }
 28
13年2月8日金曜日
watchでファイルを監視
                        $grunt	
  watch #監視を実行
      監視を開始             Running	
  "watch"	
  task
                        WaiRng...OK
      sample1.scssの更新   >>	
  File	
  "css/scss/sample1.scss"	
  renamed.
      ↓
      sassタスク自動実行       Running	
  "sass:dist"	
  (sass)	
  task
                        Uncompressed	
  size:	
  886	
  bytes.
                        Compressed	
  size:	
  381	
  bytes	
  gzipped	
  (796	
  bytes	
  minified).

      sample1.jsの更新     >>	
  File	
  "src/sample1.js"	
  renamed.
      ↓
      concatタスク         Running	
  "concat:built"	
  (concat)	
  task
      minタスク            File	
  "dist/built.js"	
  created.
      自動実行
                        Running	
  "min:dist"	
  (min)	
  task
                        File	
  "dist/bilt.min.js"	
  created.
                        Uncompressed	
  size:	
  125	
  bytes.
                        Compressed	
  size:	
  66	
  bytes	
  gzipped	
  (75	
  bytes	
  minified).
 29
13年2月8日金曜日
監視+ブラウザ自動リロード

                            1. 監視によって更新を検知
         css
                            2. Chrome等の拡張機能に通知
             src            3. 拡張機能がブラウザを自動的に
                             リロード
        grunt.js



               LiveReload


 30
13年2月8日金曜日
監視+ブラウザ自動リロード
                   • LiveReload	
  -­‐	
  ブラウザの拡張機能
      LiveReload




 31
13年2月8日金曜日
監視+ブラウザ自動リロード
       $npm	
  install	
  grunt-­‐reload #リロード機能をインストール

                     module.exports	
  =	
  funcRon(grunt){…
                     	
  	
  	
  	
  grunt.loadNpmTasks('grunt-­‐reload');	
  
         css         	
  	
  	
  	
  grunt.initConfig({
                     	
  	
  	
  	
  	
  	
  	
  watch:	
  {
                     	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  css:	
  {
                     	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  files:['css/scss/*.scss'],
             src     	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  tasks:	
  'sass	
  reload'
                     	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  },
                     	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  js:	
  {
                     	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  files:['src'],
        grunt.js     	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  tasks:	
  'concat	
  min	
  reload'
                     	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  }
                     	
  	
  	
  	
  	
  	
  	
  	
  },
                     	
  	
  	
  	
  });
                     	
  	
  	
  	
  …
                     }
 32
13年2月8日金曜日
監視+ブラウザ自動リロード

                   module.exports	
  =	
  funcRon(grunt){…
                   	
  	
  	
  	
  grunt.initConfig({
         css       	
  	
  	
  	
  	
  	
  	
  	
  …
                   	
  	
  	
  	
  	
  	
  	
  	
  server	
  :	
  {
                   	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  port:	
  8000,
                   	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  base:'.'
             src   	
  	
  	
  	
  	
  	
  	
  	
  },
                   	
  	
  	
  	
  	
  	
  	
  	
  reload:	
  {
                   	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  port:	
  35729,	
  //	
  LiveReloadで使用するポート

        grunt.js   	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  liveReload:	
  true
                   	
  	
  	
  	
  	
  	
  	
  	
  }
                   	
  	
  	
  	
  });
                   	
  	
  	
  	
  …
                   	
  	
  	
  	
  grunt.registerTask('develop',	
  ['server',	
  'reload',	
  'watch']);
                   }

 33
13年2月8日金曜日
まとめ

      • WEBサイトと開発、両方を高速化しよう!
      • チームでビルドツールの統一が必要
      • 日進月歩で次々と新しい技術が
                  (´;ω;`)ブワッ




 34
13年2月8日金曜日
ご清聴、
             ありがとうございました



 35
13年2月8日金曜日

More Related Content

PDF
node+socket.io+enchant.jsでチャットゲーを作る
PDF
GContractsの基礎
PDF
Three.jsで3D気分
PDF
配布用Supervisordによるnode.jsの運用
PDF
Groovyの紹介20130323
PDF
Docker やってみた
PDF
Gws 20130315 gradle_handson
PDF
WebGL and Three.js
node+socket.io+enchant.jsでチャットゲーを作る
GContractsの基礎
Three.jsで3D気分
配布用Supervisordによるnode.jsの運用
Groovyの紹介20130323
Docker やってみた
Gws 20130315 gradle_handson
WebGL and Three.js

What's hot (8)

PDF
Java開発の強力な相棒として今すぐ使えるGroovy
PDF
【ツクールMV】ゲーム開始~Scene_Title呼び出しまでの流れ(一人輪読会)
PPTX
13016 n分で作るtype scriptでnodejs
PDF
【第5回】渋谷Unity技術勉強会 - WebPlayer面白いよ!
PDF
FMDBの利用方法
PDF
Groovy base gradle_20130309
PDF
History & Practices for UniRx UniRxの歴史、或いは開発(中)タイトルの用例と落とし穴の回避法
PDF
jQuery Performance Tips – jQueryにおける高速化 -
Java開発の強力な相棒として今すぐ使えるGroovy
【ツクールMV】ゲーム開始~Scene_Title呼び出しまでの流れ(一人輪読会)
13016 n分で作るtype scriptでnodejs
【第5回】渋谷Unity技術勉強会 - WebPlayer面白いよ!
FMDBの利用方法
Groovy base gradle_20130309
History & Practices for UniRx UniRxの歴史、或いは開発(中)タイトルの用例と落とし穴の回避法
jQuery Performance Tips – jQueryにおける高速化 -
Ad

Similar to Webサイト・フロントエンドの高速化とgrunt.jsについて (20)

PDF
Dockerと継続的インテグレーション
PDF
Grunt front-osaka-1-lt-tanaka
PPTX
EWD 3 トレーニング・コース #1 Node.jsとGT.Mの統合方法
PDF
Scala2.10.x bytecode problems in Android
PDF
Jenkinsについて
PDF
jsCafe v13 Grunt
PDF
Openstack chef-repo
PDF
Jenkins plugin memo
PPTX
Gruntでjava script前作業の自動化!
PDF
Docker最新動向2017秋+セキュリティの落とし穴
PPTX
ラズパイ2で動く Docker PaaSを作ってみたよ
PDF
Grunt.jsを使った Expressの開発環境構築
PDF
[Container Runtime Meetup] runc & User Namespaces
PDF
Rails3.1rc4を試してみた
PDF
Groovyで楽にSQLを実行してみよう
PDF
Ansible2.0と実用例
PDF
Openresty
PDF
Sinatraでwebアプリケーション開発を学ぶ
PDF
はてなにおける継続的デプロイメントの現状と Docker の導入
PDF
about DakotagUI
Dockerと継続的インテグレーション
Grunt front-osaka-1-lt-tanaka
EWD 3 トレーニング・コース #1 Node.jsとGT.Mの統合方法
Scala2.10.x bytecode problems in Android
Jenkinsについて
jsCafe v13 Grunt
Openstack chef-repo
Jenkins plugin memo
Gruntでjava script前作業の自動化!
Docker最新動向2017秋+セキュリティの落とし穴
ラズパイ2で動く Docker PaaSを作ってみたよ
Grunt.jsを使った Expressの開発環境構築
[Container Runtime Meetup] runc & User Namespaces
Rails3.1rc4を試してみた
Groovyで楽にSQLを実行してみよう
Ansible2.0と実用例
Openresty
Sinatraでwebアプリケーション開発を学ぶ
はてなにおける継続的デプロイメントの現状と Docker の導入
about DakotagUI
Ad

Webサイト・フロントエンドの高速化とgrunt.jsについて

  • 1. WEBサイト・フロントエンドの高速化と grunt.jsについて @tomof 1 13年2月8日金曜日
  • 2. 自己紹介 • Twi)er  ID  :  @tomof  • 静岡のSolarisに超強い某社に勤めています。 • jQueryの日本語リファレンスサイトを 運営しています。 h)p://js.studio-­‐kingdom.com/jquery 2 13年2月8日金曜日
  • 3. バージョンの違いに注意 • この資料は0.3系を元に作成されています。 • 0.3系から0.4系では、grunt.js  が  GrunDile.js  に 変更されるなどの違いがあります。 • 0.3と0.4の詳しい違いは下記を参照(英文) h)ps://github.com/gruntjs/grunt/wiki/ Upgrading-­‐from-­‐0.3-­‐to-­‐0.4 3 13年2月8日金曜日
  • 4. フロントエンドの高速化 • WEBサイトの高速化は バックエンドだけの課題じゃない! • HTTPのリクエストを減らそう! 参考:h&p://www.inter-­‐office.co.jp/contents/177/ 4 13年2月8日金曜日
  • 5. CSSスプライト • 数年前ぐらいから、HTML,CSSコーディングに おいては、導入して当然(?)の手法となった。 HTTPリクエスト  =   8 HTTPリクエスト  =   1 5 13年2月8日金曜日
  • 6. CSSやjsファイルも同じ! • 最近だと、jsやcssの ファイル数も増加! • jQueryプラグインを 多数使用する場合も 注意! 6 13年2月8日金曜日
  • 7. Chromeのツールで確認! • 0.5secだと、人は遅延を感じないらしい。 • 0.2secスピードを上げるだけで売上に影響も? 7 13年2月8日金曜日
  • 8. jsやcssのファイルをビルドする 開発 公開 \  ビルド!/ all.js \  ビルド!/ all.css 8 13年2月8日金曜日
  • 9. ビルドがしてくれる事 • Concat    -­‐  連結 複数のファイルを1つにまとめる。 • Minify    -­‐  圧縮 コメントや改行を除去。変数名も短縮。 • Lint  -­‐  文法チェック 難読化… 文末のセミコロン抜けなどをチェック! Sass… • Unit  Test  -­‐  ユニットテスト Coffee  Script… エンバグやレベルダウンをチェック! 他にも色々… 9 13年2月8日金曜日
  • 10. grunt.jsを試してみる • jQuery1.8でビルドツールとして採用。 • 作成者がjQuery開発メンバーらしいです。 • 他にRequireJSなどがあります。 10 13年2月8日金曜日
  • 11. jQueryのgruntを確認 git clone git://github.com/jquery/jquery.git src 開発用のファイルを格納するフォルダ dist コンパイルしたファイルの出力先 grunt.js grunt.jsファイル node_module Node.jsのモジュール用のフォルダ package.json Node.jsのバージョン管理等を指定するフォルダ 11 13年2月8日金曜日
  • 12. jQueryのgruntを確認 連結されたファイル 上記ファイルを圧縮 開発時のファイル grunt.js 12 13年2月8日金曜日
  • 13. jQueryのgruntを確認 node_modules Node.jsのモジュールを 格納するフォルダ pacage.json バージョン 管理用のファイル 13 13年2月8日金曜日
  • 14. gruntことはじめ 1.node.jsとgruntのインストール   いわゆる「黒い画面」を使います。(割愛) 2.grunt.jsファイルの作成 このファイルにタスクを記述。 3.タスクをコマンドで実行 タスクはビルド対象ファイル、作業内容、ビルド後の ファイル出力先などの指定します。 14 13年2月8日金曜日
  • 15. 黒い画面が苦手な人用 • CodeKit h&p://incident57.com/codekit/ • 25ドル Mac限定みたい… (´・ω・`) 15 13年2月8日金曜日
  • 16. CodeKitとGruntの比較 h&p://havelog.ayumusato.com/develop/others/e524-­‐yeoman_and_brunch.html 16 13年2月8日金曜日
  • 17. 簡単なサンプルで試してみる • サンプルフォルダとファイルを準備 dist /*  comment  */ funcRon  hoge(){        alert('hoge!'); src sample1.js } grunt.js /*  comment  */ funcRon  fuga(){        alert('fuga!'); sample2.js } 17 13年2月8日金曜日
  • 18. 簡単なサンプルで試してみる • サンプルフォルダとファイルを準備 module.exports  =  funcRon(grunt)  { dist ...        grunt.initConfig({                concat:  { src                        built:  {                                src:  ['src/sample1.js',  'src/sample2.js'],                                dest:  'dist/built.js'                        } grunt.js                },        });        grunt.registerTask('build',  'concat'); } 18 13年2月8日金曜日
  • 19. 簡単なサンプルで試してみる $  grunt  build      #コマンドを実行してbuilt.jsを生成 /* dist  *  comment built.js  */ 生成 funcRon  hoge(){ src        alert('hoge!'); } /*  *  comment grunt.js  */ funcRon  fuga(){        alert('fuga!'); } 19 13年2月8日金曜日
  • 20. 簡単なサンプルで試してみる • 先ほどのgrunt.jsにminifyを追加 module.exports  =  funcRon(grunt)  { dist ...        grunt.initConfig({                concat:  {…        }, src                min:  {                        dist:  {                                src:  'dist/built.js',                                dest:  'dist/bilt.min.js' grunt.js                        }                },        });        grunt.registerTask('build',  'concat  min'); } 20 13年2月8日金曜日
  • 21. 簡単なサンプルで試してみる $  grunt  build      #再度コマンドを実行してbuilt.min.jsを生成 dist built.js src funcRon  hoge(){alert("hoge!")}funcRon  fuga() grunt.js {alert("fuga!")}; built.min.js 生成 21 13年2月8日金曜日
  • 22. 機能を拡張してみる • SCSSファイルのコンパイル機能をgruntに 追加する。 • 開発速度も高速化! 22 13年2月8日金曜日
  • 23. 機能を拡張してみる • scssのファイルを準備 $blue:  #3bbfce; css scss $margin:  16px; sample1.scss .content-­‐navigaRon  {    border-­‐color:  $blue;    color:        darken($blue,  9%); …(省略) table.hl  { grunt.js    margin:  2em  0; sample2.scss    td.ln  {        text-­‐align:  right;    } } …(省略) 23 13年2月8日金曜日
  • 24. 機能を拡張してみる $npm  install  grunt-­‐sass #拡張機能をインストール module.exports  =  funcRon(grunt){ css        grunt.loadNpmTasks('grunt-­‐sass');   scss        grunt.initConfig({                concat:  {…        },                min:  {…        },                sass:  {                        dist:  {                                files:  {'css/sample.css':                                                  ['css/scss/sample1.scss',  'css/scss/sample2.scss'] grunt.js                                        }                        }                },        });        grunt.registerTask('build',  'concat  min');        grunt.registerTask('style',  'sass'); } 24 13年2月8日金曜日
  • 25. 機能を拡張してみる .content-­‐navigaRon  {    border-­‐color:  #3bbfce;    color:  #2ca2af;  } css scss .border  {    padding:  8px;    margin:  8px;    border-­‐color:  #3bbfce;  } table.hl  {    margin:  2em  0;  }    table.hl  td.ln  { grunt.js sample.css        text-­‐align:  right;  } 生成 li  {    font-­‐family:  serif;    font-­‐weight:  bold;    font-­‐size:  1.2em;  } 25 13年2月8日金曜日
  • 26. 機能を拡張してみる • その他にも色々 –  Data  URI   'data:image/png;base64,iVBORw0KGgoAAAANSUhEU –  Less –  CoffeeScript –  etc… grunt.jsの公式サイトから探せます。 26 13年2月8日金曜日
  • 27. watchでファイルを監視 1. 監視対象を決定する css 2. 監視対象が更新された時に src 実行したいタスクを登録 3. watchコマンドを実行して監視を grunt.js 開始する。 27 13年2月8日金曜日
  • 28. watchでファイルを監視 module.exports  =  funcRon(grunt)  {... css        grunt.initConfig({…                watch:  {                    css:  { cssの監視 src                            files:['css/scss/*.scss'],                            tasks:  'sass'                    },                    js:  { jsの監視 grunt.js                            files:['src'],                            tasks:  'concat  min'                    }                },        …}); } 28 13年2月8日金曜日
  • 29. watchでファイルを監視 $grunt  watch #監視を実行 監視を開始 Running  "watch"  task WaiRng...OK sample1.scssの更新 >>  File  "css/scss/sample1.scss"  renamed. ↓ sassタスク自動実行 Running  "sass:dist"  (sass)  task Uncompressed  size:  886  bytes. Compressed  size:  381  bytes  gzipped  (796  bytes  minified). sample1.jsの更新 >>  File  "src/sample1.js"  renamed. ↓ concatタスク Running  "concat:built"  (concat)  task minタスク File  "dist/built.js"  created. 自動実行 Running  "min:dist"  (min)  task File  "dist/bilt.min.js"  created. Uncompressed  size:  125  bytes. Compressed  size:  66  bytes  gzipped  (75  bytes  minified). 29 13年2月8日金曜日
  • 30. 監視+ブラウザ自動リロード 1. 監視によって更新を検知 css 2. Chrome等の拡張機能に通知 src 3. 拡張機能がブラウザを自動的に リロード grunt.js LiveReload 30 13年2月8日金曜日
  • 31. 監視+ブラウザ自動リロード • LiveReload  -­‐  ブラウザの拡張機能 LiveReload 31 13年2月8日金曜日
  • 32. 監視+ブラウザ自動リロード $npm  install  grunt-­‐reload #リロード機能をインストール module.exports  =  funcRon(grunt){…        grunt.loadNpmTasks('grunt-­‐reload');   css        grunt.initConfig({              watch:  {                    css:  {                            files:['css/scss/*.scss'], src                            tasks:  'sass  reload'                    },                    js:  {                            files:['src'], grunt.js                            tasks:  'concat  min  reload'                    }                },        });        … } 32 13年2月8日金曜日
  • 33. 監視+ブラウザ自動リロード module.exports  =  funcRon(grunt){…        grunt.initConfig({ css                …                server  :  {                        port:  8000,                        base:'.' src                },                reload:  {                        port:  35729,  //  LiveReloadで使用するポート grunt.js                        liveReload:  true                }        });        …        grunt.registerTask('develop',  ['server',  'reload',  'watch']); } 33 13年2月8日金曜日
  • 34. まとめ • WEBサイトと開発、両方を高速化しよう! • チームでビルドツールの統一が必要 • 日進月歩で次々と新しい技術が            (´;ω;`)ブワッ 34 13年2月8日金曜日
  • 35. ご清聴、 ありがとうございました 35 13年2月8日金曜日