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

4,039 views
3,945 views

Published on

Node.js勉強会 in 大阪

Published in: Education
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,039
On SlideShare
0
From Embeds
0
Number of Embeds
1,525
Actions
Shares
0
Downloads
19
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

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.jsJavaScript(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. gruntGrunt.jsで起動したフロントサーバとExpressのバックエンドサーバの連携
  27. 27. gruntGrunt.jsで起動したフロントサーバとExpressのバックエンドサーバの連携
  28. 28. gruntGrunt.jsで起動したフロントサーバとExpressのバックエンドサーバの連携Proxy
  29. 29. リバースプロキシモジュールを使う(単体)■ grunt-connect-proxyhttps://github.com/drewzboto/grunt-connect-proxy※ 設定などの細かい内容はサイトを参照
  30. 30. テンプレート生成モジュールgrunt-init を使う■ grunt-init-expresshttps://github.com/kamiyam/grunt-init-express
  31. 31. フォルダ構成など各個人の癖もありこれが正解というものがない例えば、
  32. 32. • Viewファイルだけに限定する or しない• サーバサイドのjsファイルのwatch、LiveReloadを許可するのか(supervisorのリロード時間とgruntのリロード時間が合わない・・・などなど)
  33. 33. 使いこなせれば、バックエンドの言語を問わず(例えば、PHPなどWordPressでも) 同じことが出来る。Watch するファイルが変わるだけ。
  34. 34. gruntProxy
  35. 35. まとめ• Grunt.js はNode.jsを用いたタスクランナー(便利屋)• リバースプロキシモジュールを使えばバックエンドの種類は問わない
  36. 36. ご静聴ありがとうございました

×