Webサイト・フロントエンドの高速化とgrunt.jsについて
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 4,685 views

 

Statistics

Views

Total Views
4,685
Views on SlideShare
4,674
Embed Views
11

Actions

Likes
24
Downloads
19
Comments
1

1 Embed 11

https://twitter.com 11

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • こっちも見ていただけると、嬉しいです。
    http://js.studio-kingdom.com/grunt
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

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