Successfully reported this slideshow.
Your SlideShare is downloading. ×

Grunt.jsを使った Expressの開発環境構築

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
React VR ことはじめ
React VR ことはじめ
Loading in …3
×

Check these out next

1 of 36 Ad
Advertisement

More Related Content

Slideshows for you (20)

Advertisement

Similar to Grunt.jsを使った Expressの開発環境構築 (20)

More from kamiyam . (20)

Advertisement

Recently uploaded (20)

Grunt.jsを使った Expressの開発環境構築

  1. 1. Grunt.jsを使った Expressの開発環境構築 Node.js勉強会 in 大阪 2013.5.25              
  2. 2. 自己紹介 • かみやん (Twitter@kamiyam) • Meteorworks エンジニア • Webサービスつくってます http://nantokaworks.com
  3. 3. grunt とはなにか?
  4. 4. Grunt.js JavaScript(Node.js)製タスクランナー
  5. 5. Grunt.jsは(面倒な)タスクを 代わりに代行してくれるツール
  6. 6. 山積みのタスk・・・ • CoffeeScriptのコンパイル • Sassのコンパイル • CSSファイルのコードミニファイ化・結合 • 画像ファイルの圧縮 • 画面の表示確認
  7. 7. キーワード • grunt: 起動など(gruntコマンド) • Gruntfile.js: gruntのタスク設定ファイル
  8. 8. キーワード • jQuery: JavaScriptのライブラリ • package.json: パッケージ構成ファイル
  9. 9. package.json 一緒に利用するモジュール情報などを 記述する設定ファイル Node.jsで作成するすべての成果物は 一つのパッケージモジュールとして扱うため、 必須ではないがかならず添えておくようにする。
  10. 10. インストール $ npm install -g grunt-cli ※ gruntコマンドが利用可能となる。
  11. 11. 環境構築 $ vim Gruntfile.js
  12. 12. Gruntfile.js 設定例 module.exports = function(grunt) { grunt.initConfig({ xxxxxx: { //......... } }); grunt.loadNpmTasks('grunt-contrib-xxxxxx'); grunt.registerTask('default', ['xxxxxx']); };
  13. 13. プロジェクトの内容、規模によってつ かうタスク(gruntのモジュール)を追 加していく。 jQueryのようにプラグインを追加す るイメージ
  14. 14. open & watch & LiveReload タスク
  15. 15. open & watch & LiveReload タスク 1,ブラウザを開いて
  16. 16. open & watch & LiveReload タスク 1,ブラウザを開いて 2,ファイルの変更(を監視)して
  17. 17. open & watch & LiveReload タスク 1,ブラウザを開いて 2,ファイルの変更(を監視)して 3,ブラウザをリロードして
  18. 18. open & watch & LiveReload タスク 1,ブラウザを開いて 2,ファイルの変更(を監視)して 3,ブラウザをリロードして 確認する!!
  19. 19. open & watch & LiveReload タスク 1,ブラウザを開いて 2,ファイルの変更(を監視)して 3,ブラウザをリロードして 超めんどくさいですよね。確認する!!
  20. 20. デモ ダウンロード https://gist.github.com/kamiyam/4996713
  21. 21. $ npm install $ grunt デモ 実行
  22. 22. ちなみに似たようなことをする仲間に このようなおっさんがいます(ry!
  23. 23. gruntもNode.jsのサーバを起動しています。 ここまではフロントエンド側で完結する話。
  24. 24. Grunt.jsとExpressの連携
  25. 25. どのようにして gruntとExpressを連携させるのか
  26. 26. grunt Grunt.jsで起動したフロントサーバと Expressのバックエンドサーバの連携
  27. 27. grunt Grunt.jsで起動したフロントサーバと Expressのバックエンドサーバの連携
  28. 28. grunt Grunt.jsで起動したフロントサーバと Expressのバックエンドサーバの連携 Proxy
  29. 29. リバースプロキシモジュールを使う(単体) ■ grunt-connect-proxy https://github.com/drewzboto/grunt- connect-proxy ※ 設定などの細かい内容はサイトを参照
  30. 30. テンプレート生成モジュールgrunt-init を使う ■ grunt-init-express https://github.com/kamiyam/grunt-init- express
  31. 31. フォルダ構成など各個人の癖もあり これが正解というものがない 例えば、
  32. 32. • Viewファイルだけに限定する or しない • サーバサイドのjsファイルのwatch、 LiveReloadを許可するのか (supervisorのリロード時間とgruntのリ ロード時間が合わない・・・などなど)
  33. 33. 使いこなせれば、バックエンドの言語を 問わず(例えば、PHPなどWordPressで も) 同じことが出来る。 Watch するファイルが変わるだけ。
  34. 34. grunt Proxy
  35. 35. まとめ • Grunt.js はNode.jsを用いた タスクランナー(便利屋) • リバースプロキシモジュールを使えば バックエンドの種類は問わない
  36. 36. ご静聴ありがとうございました

×