Your SlideShare is downloading. ×
0
WEBサイト・フロントエンドの高速化と             grunt.jsについて                @tomof 113年2月8日金曜日
自己紹介     • Twi)er	  ID	  :	  @tomof      • 静岡のSolarisに超強い某社に勤めています。     • jQueryの日本語リファレンスサイトを       運営しています。       h)p://...
バージョンの違いに注意     • この資料は0.3系を元に作成されています。     • 0.3系から0.4系では、grunt.js	  が	  GrunDile.js	  に       変更されるなどの違いがあります。     • 0.3...
フロントエンドの高速化     • WEBサイトの高速化は       バックエンドだけの課題じゃない!     • HTTPのリクエストを減らそう!       参考:h&p://www.inter-­‐office.co.jp/contents...
CSSスプライト     • 数年前ぐらいから、HTML,CSSコーディングに       おいては、導入して当然(?)の手法となった。                   HTTPリクエスト	  =	     8               ...
CSSやjsファイルも同じ!     • 最近だと、jsやcssの       ファイル数も増加!     • jQueryプラグインを       多数使用する場合も       注意! 613年2月8日金曜日
Chromeのツールで確認!     • 0.5secだと、人は遅延を感じないらしい。     • 0.2secスピードを上げるだけで売上に影響も? 713年2月8日金曜日
jsやcssのファイルをビルドする             開発                公開                  \	  ビルド!/                               all.js        ...
ビルドがしてくれる事     • Concat	  	  -­‐	  連結       複数のファイルを1つにまとめる。     • Minify	  	  -­‐	  圧縮       コメントや改行を除去。変数名も短縮。     • Lin...
grunt.jsを試してみる      • jQuery1.8でビルドツールとして採用。      • 作成者がjQuery開発メンバーらしいです。      • 他にRequireJSなどがあります。 1013年2月8日金曜日
jQueryのgruntを確認       git clone git://github.com/jquery/jquery.git       src               開発用のファイルを格納するフォルダ       dist   ...
jQueryのgruntを確認             連結されたファイル             上記ファイルを圧縮             開発時のファイル                 grunt.js 1213年2月8日金曜日
jQueryのgruntを確認             node_modules             Node.jsのモジュールを             格納するフォルダ             pacage.json          ...
gruntことはじめ      1.node.jsとgruntのインストール	         いわゆる「黒い画面」を使います。(割愛)      2.grunt.jsファイルの作成       このファイルにタスクを記述。      3.タス...
黒い画面が苦手な人用      • CodeKit          h&p://incident57.com/codekit/      • 25ドル             Mac限定みたい…             (´・ω・`) 151...
CodeKitとGruntの比較      h&p://havelog.ayumusato.com/develop/others/e524-­‐yeoman_and_brunch.html 1613年2月8日金曜日
簡単なサンプルで試してみる      • サンプルフォルダとファイルを準備         dist                                /*	  comment	  */                       ...
簡単なサンプルで試してみる      • サンプルフォルダとファイルを準備                   module.exports	  =	  funcRon(grunt)	  {         dist      ...     ...
簡単なサンプルで試してみる       $	  grunt	  build	  	  	  #コマンドを実行してbuilt.jsを生成                                     /*         dist   ...
簡単なサンプルで試してみる      • 先ほどのgrunt.jsにminifyを追加                   module.exports	  =	  funcRon(grunt)	  {         dist      .....
簡単なサンプルで試してみる       $	  grunt	  build	  	  	  #再度コマンドを実行してbuilt.min.jsを生成         dist                    built.js        ...
機能を拡張してみる      • SCSSファイルのコンパイル機能をgruntに        追加する。      • 開発速度も高速化! 2213年2月8日金曜日
機能を拡張してみる      • scssのファイルを準備                                          $blue:	  #3bbfce;         css       scss           ...
機能を拡張してみる       $npm	  install	  grunt-­‐sass #拡張機能をインストール                          module.exports	  =	  funcRon(grunt){  ...
機能を拡張してみる                                .content-­‐navigaRon	  {                                	  	  border-­‐color:	  #...
機能を拡張してみる      • その他にも色々        –	  Data	  URI	     data:image/png;base64,iVBORw0KGgoAAAANSUhEU        –	  Less        –	 ...
watchでファイルを監視                      1. 監視対象を決定する         css                      2. 監視対象が更新された時に             src       実行し...
watchでファイルを監視                    module.exports	  =	  funcRon(grunt)	  {...         css        	  	  	  	  grunt.initConfig...
watchでファイルを監視                        $grunt	  watch #監視を実行      監視を開始             Running	  "watch"	  task                ...
監視+ブラウザ自動リロード                            1. 監視によって更新を検知         css                            2. Chrome等の拡張機能に通知         ...
監視+ブラウザ自動リロード                   • LiveReload	  -­‐	  ブラウザの拡張機能      LiveReload 3113年2月8日金曜日
監視+ブラウザ自動リロード       $npm	  install	  grunt-­‐reload #リロード機能をインストール                     module.exports	  =	  funcRon(grunt)...
監視+ブラウザ自動リロード                   module.exports	  =	  funcRon(grunt){…                   	  	  	  	  grunt.initConfig({     ...
まとめ      • WEBサイトと開発、両方を高速化しよう!      • チームでビルドツールの統一が必要      • 日進月歩で次々と新しい技術が                  (´;ω;`)ブワッ 3413年2月8日金曜日
ご清聴、             ありがとうございました 3513年2月8日金曜日
Upcoming SlideShare
Loading in...5
×

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

4,465

Published on

1 Comment
25 Likes
Statistics
Notes
  • こっちも見ていただけると、嬉しいです。
    http://js.studio-kingdom.com/grunt
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
4,465
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
21
Comments
1
Likes
25
Embeds 0
No embeds

No notes for slide

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

  1. 1. WEBサイト・フロントエンドの高速化と grunt.jsについて @tomof 113年2月8日金曜日
  2. 2. 自己紹介 • Twi)er  ID  :  @tomof  • 静岡のSolarisに超強い某社に勤めています。 • jQueryの日本語リファレンスサイトを 運営しています。 h)p://js.studio-­‐kingdom.com/jquery 213年2月8日金曜日
  3. 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 313年2月8日金曜日
  4. 4. フロントエンドの高速化 • WEBサイトの高速化は バックエンドだけの課題じゃない! • HTTPのリクエストを減らそう! 参考:h&p://www.inter-­‐office.co.jp/contents/177/ 413年2月8日金曜日
  5. 5. CSSスプライト • 数年前ぐらいから、HTML,CSSコーディングに おいては、導入して当然(?)の手法となった。 HTTPリクエスト  =   8 HTTPリクエスト  =   1 513年2月8日金曜日
  6. 6. CSSやjsファイルも同じ! • 最近だと、jsやcssの ファイル数も増加! • jQueryプラグインを 多数使用する場合も 注意! 613年2月8日金曜日
  7. 7. Chromeのツールで確認! • 0.5secだと、人は遅延を感じないらしい。 • 0.2secスピードを上げるだけで売上に影響も? 713年2月8日金曜日
  8. 8. jsやcssのファイルをビルドする 開発 公開 \  ビルド!/ all.js \  ビルド!/ all.css 813年2月8日金曜日
  9. 9. ビルドがしてくれる事 • Concat    -­‐  連結 複数のファイルを1つにまとめる。 • Minify    -­‐  圧縮 コメントや改行を除去。変数名も短縮。 • Lint  -­‐  文法チェック 難読化… 文末のセミコロン抜けなどをチェック! Sass… • Unit  Test  -­‐  ユニットテスト Coffee  Script… エンバグやレベルダウンをチェック! 他にも色々… 913年2月8日金曜日
  10. 10. grunt.jsを試してみる • jQuery1.8でビルドツールとして採用。 • 作成者がjQuery開発メンバーらしいです。 • 他にRequireJSなどがあります。 1013年2月8日金曜日
  11. 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のバージョン管理等を指定するフォルダ 1113年2月8日金曜日
  12. 12. jQueryのgruntを確認 連結されたファイル 上記ファイルを圧縮 開発時のファイル grunt.js 1213年2月8日金曜日
  13. 13. jQueryのgruntを確認 node_modules Node.jsのモジュールを 格納するフォルダ pacage.json バージョン 管理用のファイル 1313年2月8日金曜日
  14. 14. gruntことはじめ 1.node.jsとgruntのインストール   いわゆる「黒い画面」を使います。(割愛) 2.grunt.jsファイルの作成 このファイルにタスクを記述。 3.タスクをコマンドで実行 タスクはビルド対象ファイル、作業内容、ビルド後の ファイル出力先などの指定します。 1413年2月8日金曜日
  15. 15. 黒い画面が苦手な人用 • CodeKit h&p://incident57.com/codekit/ • 25ドル Mac限定みたい… (´・ω・`) 1513年2月8日金曜日
  16. 16. CodeKitとGruntの比較 h&p://havelog.ayumusato.com/develop/others/e524-­‐yeoman_and_brunch.html 1613年2月8日金曜日
  17. 17. 簡単なサンプルで試してみる • サンプルフォルダとファイルを準備 dist /*  comment  */ funcRon  hoge(){        alert(hoge!); src sample1.js } grunt.js /*  comment  */ funcRon  fuga(){        alert(fuga!); sample2.js } 1713年2月8日金曜日
  18. 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); } 1813年2月8日金曜日
  19. 19. 簡単なサンプルで試してみる $  grunt  build      #コマンドを実行してbuilt.jsを生成 /* dist  *  comment built.js  */ 生成 funcRon  hoge(){ src        alert(hoge!); } /*  *  comment grunt.js  */ funcRon  fuga(){        alert(fuga!); } 1913年2月8日金曜日
  20. 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); } 2013年2月8日金曜日
  21. 21. 簡単なサンプルで試してみる $  grunt  build      #再度コマンドを実行してbuilt.min.jsを生成 dist built.js src funcRon  hoge(){alert("hoge!")}funcRon  fuga() grunt.js {alert("fuga!")}; built.min.js 生成 2113年2月8日金曜日
  22. 22. 機能を拡張してみる • SCSSファイルのコンパイル機能をgruntに 追加する。 • 開発速度も高速化! 2213年2月8日金曜日
  23. 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;    } } …(省略) 2313年2月8日金曜日
  24. 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); } 2413年2月8日金曜日
  25. 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;  } 2513年2月8日金曜日
  26. 26. 機能を拡張してみる • その他にも色々 –  Data  URI   data:image/png;base64,iVBORw0KGgoAAAANSUhEU –  Less –  CoffeeScript –  etc… grunt.jsの公式サイトから探せます。 2613年2月8日金曜日
  27. 27. watchでファイルを監視 1. 監視対象を決定する css 2. 監視対象が更新された時に src 実行したいタスクを登録 3. watchコマンドを実行して監視を grunt.js 開始する。 2713年2月8日金曜日
  28. 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                    }                },        …}); } 2813年2月8日金曜日
  29. 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). 2913年2月8日金曜日
  30. 30. 監視+ブラウザ自動リロード 1. 監視によって更新を検知 css 2. Chrome等の拡張機能に通知 src 3. 拡張機能がブラウザを自動的に リロード grunt.js LiveReload 3013年2月8日金曜日
  31. 31. 監視+ブラウザ自動リロード • LiveReload  -­‐  ブラウザの拡張機能 LiveReload 3113年2月8日金曜日
  32. 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                    }                },        });        … } 3213年2月8日金曜日
  33. 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]); } 3313年2月8日金曜日
  34. 34. まとめ • WEBサイトと開発、両方を高速化しよう! • チームでビルドツールの統一が必要 • 日進月歩で次々と新しい技術が            (´;ω;`)ブワッ 3413年2月8日金曜日
  35. 35. ご清聴、 ありがとうございました 3513年2月8日金曜日
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×