Your SlideShare is downloading. ×
0
Grunt.jsを使った Expressの開発環境構築
Grunt.jsを使った Expressの開発環境構築
Grunt.jsを使った Expressの開発環境構築
Grunt.jsを使った Expressの開発環境構築
Grunt.jsを使った Expressの開発環境構築
Grunt.jsを使った Expressの開発環境構築
Grunt.jsを使った Expressの開発環境構築
Grunt.jsを使った Expressの開発環境構築
Grunt.jsを使った Expressの開発環境構築
Grunt.jsを使った Expressの開発環境構築
Grunt.jsを使った Expressの開発環境構築
Grunt.jsを使った Expressの開発環境構築
Grunt.jsを使った Expressの開発環境構築
Grunt.jsを使った Expressの開発環境構築
Grunt.jsを使った Expressの開発環境構築
Grunt.jsを使った Expressの開発環境構築
Grunt.jsを使った Expressの開発環境構築
Grunt.jsを使った Expressの開発環境構築
Grunt.jsを使った Expressの開発環境構築
Grunt.jsを使った Expressの開発環境構築
Grunt.jsを使った Expressの開発環境構築
Grunt.jsを使った Expressの開発環境構築
Grunt.jsを使った Expressの開発環境構築
Grunt.jsを使った Expressの開発環境構築
Grunt.jsを使った Expressの開発環境構築
Grunt.jsを使った Expressの開発環境構築
Grunt.jsを使った Expressの開発環境構築
Grunt.jsを使った Expressの開発環境構築
Grunt.jsを使った Expressの開発環境構築
Grunt.jsを使った Expressの開発環境構築
Grunt.jsを使った Expressの開発環境構築
Grunt.jsを使った Expressの開発環境構築
Grunt.jsを使った Expressの開発環境構築
Grunt.jsを使った Expressの開発環境構築
Grunt.jsを使った Expressの開発環境構築
Grunt.jsを使った Expressの開発環境構築
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

3,589

Published on

Node.js勉強会 in 大阪

Node.js勉強会 in 大阪

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

No Downloads
Views
Total Views
3,589
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
17
Comments
0
Likes
9
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×