Enviar pesquisa
Carregar
Webサイト・フロントエンドの高速化とgrunt.jsについて
•
24 gostaram
•
4,920 visualizações
Tomo Fujita
Seguir
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 35
Baixar agora
Baixar para ler offline
Recomendados
node+socket.io+enchant.jsでチャットゲーを作る
node+socket.io+enchant.jsでチャットゲーを作る
Kiyoshi SATOH
GContractsの基礎
GContractsの基礎
Takahiro Sugiura
Three.jsで3D気分
Three.jsで3D気分
Toshio Ehara
配布用Supervisordによるnode.jsの運用
配布用Supervisordによるnode.jsの運用
yut148atgmaildotcom
Groovyの紹介20130323
Groovyの紹介20130323
Yasuharu Hayami
Docker やってみた
Docker やってみた
Fumihiko Nishio
Gws 20130315 gradle_handson
Gws 20130315 gradle_handson
Nobuhiro Sue
WebGL and Three.js
WebGL and Three.js
yomotsu
Recomendados
node+socket.io+enchant.jsでチャットゲーを作る
node+socket.io+enchant.jsでチャットゲーを作る
Kiyoshi SATOH
GContractsの基礎
GContractsの基礎
Takahiro Sugiura
Three.jsで3D気分
Three.jsで3D気分
Toshio Ehara
配布用Supervisordによるnode.jsの運用
配布用Supervisordによるnode.jsの運用
yut148atgmaildotcom
Groovyの紹介20130323
Groovyの紹介20130323
Yasuharu Hayami
Docker やってみた
Docker やってみた
Fumihiko Nishio
Gws 20130315 gradle_handson
Gws 20130315 gradle_handson
Nobuhiro Sue
WebGL and Three.js
WebGL and Three.js
yomotsu
Java開発の強力な相棒として今すぐ使えるGroovy
Java開発の強力な相棒として今すぐ使えるGroovy
Yasuharu Nakano
【ツクールMV】ゲーム開始~Scene_Title呼び出しまでの流れ(一人輪読会)
【ツクールMV】ゲーム開始~Scene_Title呼び出しまでの流れ(一人輪読会)
りんね ぐりっど
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
Takayoshi Tanaka
【第5回】渋谷Unity技術勉強会 - WebPlayer面白いよ!
【第5回】渋谷Unity技術勉強会 - WebPlayer面白いよ!
Keigo Ando
FMDBの利用方法
FMDBの利用方法
uske7i
Groovy base gradle_20130309
Groovy base gradle_20130309
Nobuhiro Sue
History & Practices for UniRx UniRxの歴史、或いは開発(中)タイトルの用例と落とし穴の回避法
History & Practices for UniRx UniRxの歴史、或いは開発(中)タイトルの用例と落とし穴の回避法
Yoshifumi Kawai
jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -
Hayato Mizuno
Dockerと継続的インテグレーション
Dockerと継続的インテグレーション
Yahoo!デベロッパーネットワーク
Grunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanaka
Hisateru Tanaka
EWD 3トレーニング・コース #1 Node.jsとGT.Mの統合方法
EWD 3トレーニング・コース #1 Node.jsとGT.Mの統合方法
Kiyoshi Sawada
Scala2.10.x bytecode problems in Android
Scala2.10.x bytecode problems in Android
Taisuke Oe
Jenkinsについて
Jenkinsについて
Satoshi Namai
jsCafe v13 Grunt
jsCafe v13 Grunt
Shinya Sugo
Openstack chef-repo
Openstack chef-repo
Tomokazu Hirai
Jenkins plugin memo
Jenkins plugin memo
Kiyotaka Oku
Gruntでjava script前作業の自動化!
Gruntでjava script前作業の自動化!
Tanaka Yuichi
Docker最新動向2017秋+セキュリティの落とし穴
Docker最新動向2017秋+セキュリティの落とし穴
Masahito Zembutsu
ラズパイ2で動く Docker PaaSを作ってみたよ
ラズパイ2で動く Docker PaaSを作ってみたよ
npsg
Grunt.jsを使った Expressの開発環境構築
Grunt.jsを使った Expressの開発環境構築
kamiyam .
[Container Runtime Meetup] runc & User Namespaces
[Container Runtime Meetup] runc & User Namespaces
Akihiro Suda
Rails3.1rc4を試してみた
Rails3.1rc4を試してみた
Takahiro Hidaka
Mais conteúdo relacionado
Mais procurados
Java開発の強力な相棒として今すぐ使えるGroovy
Java開発の強力な相棒として今すぐ使えるGroovy
Yasuharu Nakano
【ツクールMV】ゲーム開始~Scene_Title呼び出しまでの流れ(一人輪読会)
【ツクールMV】ゲーム開始~Scene_Title呼び出しまでの流れ(一人輪読会)
りんね ぐりっど
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
Takayoshi Tanaka
【第5回】渋谷Unity技術勉強会 - WebPlayer面白いよ!
【第5回】渋谷Unity技術勉強会 - WebPlayer面白いよ!
Keigo Ando
FMDBの利用方法
FMDBの利用方法
uske7i
Groovy base gradle_20130309
Groovy base gradle_20130309
Nobuhiro Sue
History & Practices for UniRx UniRxの歴史、或いは開発(中)タイトルの用例と落とし穴の回避法
History & Practices for UniRx UniRxの歴史、或いは開発(中)タイトルの用例と落とし穴の回避法
Yoshifumi Kawai
jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -
Hayato Mizuno
Mais procurados
(8)
Java開発の強力な相棒として今すぐ使えるGroovy
Java開発の強力な相棒として今すぐ使えるGroovy
【ツクールMV】ゲーム開始~Scene_Title呼び出しまでの流れ(一人輪読会)
【ツクールMV】ゲーム開始~Scene_Title呼び出しまでの流れ(一人輪読会)
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
【第5回】渋谷Unity技術勉強会 - WebPlayer面白いよ!
【第5回】渋谷Unity技術勉強会 - WebPlayer面白いよ!
FMDBの利用方法
FMDBの利用方法
Groovy base gradle_20130309
Groovy base gradle_20130309
History & Practices for UniRx UniRxの歴史、或いは開発(中)タイトルの用例と落とし穴の回避法
History & Practices for UniRx UniRxの歴史、或いは開発(中)タイトルの用例と落とし穴の回避法
jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -
Semelhante a Webサイト・フロントエンドの高速化とgrunt.jsについて
Dockerと継続的インテグレーション
Dockerと継続的インテグレーション
Yahoo!デベロッパーネットワーク
Grunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanaka
Hisateru Tanaka
EWD 3トレーニング・コース #1 Node.jsとGT.Mの統合方法
EWD 3トレーニング・コース #1 Node.jsとGT.Mの統合方法
Kiyoshi Sawada
Scala2.10.x bytecode problems in Android
Scala2.10.x bytecode problems in Android
Taisuke Oe
Jenkinsについて
Jenkinsについて
Satoshi Namai
jsCafe v13 Grunt
jsCafe v13 Grunt
Shinya Sugo
Openstack chef-repo
Openstack chef-repo
Tomokazu Hirai
Jenkins plugin memo
Jenkins plugin memo
Kiyotaka Oku
Gruntでjava script前作業の自動化!
Gruntでjava script前作業の自動化!
Tanaka Yuichi
Docker最新動向2017秋+セキュリティの落とし穴
Docker最新動向2017秋+セキュリティの落とし穴
Masahito Zembutsu
ラズパイ2で動く Docker PaaSを作ってみたよ
ラズパイ2で動く Docker PaaSを作ってみたよ
npsg
Grunt.jsを使った Expressの開発環境構築
Grunt.jsを使った Expressの開発環境構築
kamiyam .
[Container Runtime Meetup] runc & User Namespaces
[Container Runtime Meetup] runc & User Namespaces
Akihiro Suda
Rails3.1rc4を試してみた
Rails3.1rc4を試してみた
Takahiro Hidaka
Groovyで楽にSQLを実行してみよう
Groovyで楽にSQLを実行してみよう
Akira Shimosako
Ansible2.0と実用例
Ansible2.0と実用例
OSSラボ株式会社
Openresty
Openresty
ogawatti
Sinatraでwebアプリケーション開発を学ぶ
Sinatraでwebアプリケーション開発を学ぶ
Hiroshi Oyamada
はてなにおける継続的デプロイメントの現状と Docker の導入
はてなにおける継続的デプロイメントの現状と Docker の導入
Yu Nobuoka
about DakotagUI
about DakotagUI
Etsuji Nomura
Semelhante a Webサイト・フロントエンドの高速化とgrunt.jsについて
(20)
Dockerと継続的インテグレーション
Dockerと継続的インテグレーション
Grunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanaka
EWD 3トレーニング・コース #1 Node.jsとGT.Mの統合方法
EWD 3トレーニング・コース #1 Node.jsとGT.Mの統合方法
Scala2.10.x bytecode problems in Android
Scala2.10.x bytecode problems in Android
Jenkinsについて
Jenkinsについて
jsCafe v13 Grunt
jsCafe v13 Grunt
Openstack chef-repo
Openstack chef-repo
Jenkins plugin memo
Jenkins plugin memo
Gruntでjava script前作業の自動化!
Gruntでjava script前作業の自動化!
Docker最新動向2017秋+セキュリティの落とし穴
Docker最新動向2017秋+セキュリティの落とし穴
ラズパイ2で動く Docker PaaSを作ってみたよ
ラズパイ2で動く Docker PaaSを作ってみたよ
Grunt.jsを使った Expressの開発環境構築
Grunt.jsを使った Expressの開発環境構築
[Container Runtime Meetup] runc & User Namespaces
[Container Runtime Meetup] runc & User Namespaces
Rails3.1rc4を試してみた
Rails3.1rc4を試してみた
Groovyで楽にSQLを実行してみよう
Groovyで楽にSQLを実行してみよう
Ansible2.0と実用例
Ansible2.0と実用例
Openresty
Openresty
Sinatraでwebアプリケーション開発を学ぶ
Sinatraでwebアプリケーション開発を学ぶ
はてなにおける継続的デプロイメントの現状と Docker の導入
はてなにおける継続的デプロイメントの現状と Docker の導入
about DakotagUI
about DakotagUI
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日金曜日
Baixar agora