Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
Gruntでフロントの生産性up
Next
Download to read offline and view in fullscreen.

Share

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

Download to read offline

Node.js勉強会 in 大阪

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. ご静聴ありがとうございました
  • sakanakana

    May. 14, 2016
  • tetsuoyutani

    Jul. 27, 2015
  • ultrakanji

    Nov. 7, 2014
  • kazu69

    Oct. 5, 2013
  • TakeshiWatanabe2

    Sep. 17, 2013
  • makies

    Sep. 15, 2013
  • ssuser82d97a

    Jun. 11, 2013
  • b23chris

    Jun. 7, 2013
  • shirokuro331

    May. 26, 2013
  • TsutomuHagiwara

    May. 26, 2013
  • stoshiya

    May. 25, 2013

Node.js勉強会 in 大阪

Views

Total views

4,513

On Slideshare

0

From embeds

0

Number of embeds

1,561

Actions

Downloads

19

Shares

0

Comments

0

Likes

11

×