WEBアプリケーションビルド・               テストツール YEOMAN                         HighTech Osaka                              2012.12.19...
自己紹介               • かみやん (Twitter@kamiyam)               • システム開発会社の一プログラマ               • Webサービスつくってます12年12月22日土曜日
YEOMENとは?     Yeomanはツールやライブラリを  迅速で華麗にビルドし、Web環境を構築する        ワークフローツールです。12年12月22日土曜日
ビルド【build】    ソースコードのコンパイルやライブラリのリンクなどを行    い、最終的な実行可能ファイルを作成すること。また、    そのような作業によって生成されたソフトウェアの版。                     Via...
コンパイル???               リンク???12年12月22日土曜日
.java   .class12年12月22日土曜日
コンパイルとは           人様が読みやすい言葉を      PC様がわかりやすい言葉に                変換する12年12月22日土曜日
リンクとは    ライブラリなどのファイル群               の関連付けを行うこと12年12月22日土曜日
AIファイル   JPEGファイル12年12月22日土曜日
JADE   HTML12年12月22日土曜日
SASS     CSS12年12月22日土曜日
Coffee    Java               Script   Script12年12月22日土曜日
jQuery.js   jQuery.min.js12年12月22日土曜日
何かしらのツールなりで               変換させて使っている               ※ 変換:コンパイル以外も含む12年12月22日土曜日
MY FEATURES          •     Lightning-fast scaffolding — Easily scaffold new projects with customizable templates (e.g     ...
YEOMANインストール前チェック                 $ curl -L get.yeoman.io | bash               ※ yeomanの全機能を使う場合は                      表示さ...
強力なSCAFFOLDING                $ yeoman init [quickstart]               Webアプリケーションフォルダ等の                     ひな形が生成される12年1...
AUTO COMPILE      CoffeeScriptやCompassを自動でコンパイルする12年12月22日土曜日
サーバいらず               Yeomanはコマンドから         ビルトインサーバーを起動することができる12年12月22日土曜日
構文チェック               JSHINTを使った構文チェック12年12月22日土曜日
画像最適化               ビルドによって画像の最適化を行う12年12月22日土曜日
自由なテンプレート         フォルダ構成を自由にテンプレート化できる12年12月22日土曜日
自動リロード                ファイルの変更を監視し               HTTPサーバの自動でリロード12年12月22日土曜日
パッケージ管理               ライブラリ/モジュールのインストールを                    楽に管理できる12年12月22日土曜日
ES6サポート               ECMAScript6をサポート12年12月22日土曜日
How to Yeoman12年12月22日土曜日
YEOMAN最短フロー               $ yeoman init [quickstart]               $ yeoman test               $ yeoman server[:dist]     ...
YEOMANフォルダ構成                -appフォルダ                #編集用フォルダ                -tempフォルダ                #開発用フォルダ             ...
いろいろなジェネレータ   # Generators for MVC/MV* Frameworks   # Skip our questions and get a H5BP, jQuery and Modernizr base   $ yeo...
ジェネレータテンプレート  node_modules/yeoman/node_modules/yeoman-  generators/lib/generators/xxxxxxx/                テンプレートとして追加すると  ...
パッケージ管理  $ yeoman install # Install a package from the client-side package registry  $ yeoman uninstall # Uninstall the pa...
Yeomanで利用している                 NPMモジュール12年12月22日土曜日
パッケージ管理                  TWITTER BOWER         HTTP://TWITTER.GITHUB.COM/BOWER/               COMPONENT.JSONでライブラリの管理を一元化1...
自動コンパイル/ 自動リロード                      GRUNT                 HTTP://GRUNTJS.COM/               GURUNT.JSでタスクを管理             ...
まとめ               • クライアントサイドのテスト/ビルドツール               • bower/gruntを利用している               • 自動リロード12年12月22日土曜日
Upcoming SlideShare
Loading in...5

WEBアプリケーションビルド・ テストツール YEOMAN


Published on

HiphTech Osaka

Published in: Education
1 Comment
  • 新しいバージョンv1.0について記事を書きました
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

WEBアプリケーションビルド・ テストツール YEOMAN

  1. 1. WEBアプリケーションビルド・ テストツール YEOMAN HighTech Osaka 2012.12.1912年12月22日土曜日
  2. 2. 自己紹介 • かみやん (Twitter@kamiyam) • システム開発会社の一プログラマ • Webサービスつくってます12年12月22日土曜日
  3. 3. HTTP://YEOMAN.IO12年12月22日土曜日
  4. 4. YEOMENとは? Yeomanはツールやライブラリを 迅速で華麗にビルドし、Web環境を構築する ワークフローツールです。12年12月22日土曜日
  5. 5. その前に、ビルドって?12年12月22日土曜日
  6. 6. ビルド【build】 ソースコードのコンパイルやライブラリのリンクなどを行 い、最終的な実行可能ファイルを作成すること。また、 そのような作業によって生成されたソフトウェアの版。 Via. IT用語辞典12年12月22日土曜日
  7. 7. コンパイル??? リンク???12年12月22日土曜日
  8. 8. .java .class12年12月22日土曜日
  9. 9. コンパイルとは 人様が読みやすい言葉を PC様がわかりやすい言葉に 変換する12年12月22日土曜日
  10. 10. リンクとは ライブラリなどのファイル群 の関連付けを行うこと12年12月22日土曜日
  11. 11. WEBサイトに置き換える12年12月22日土曜日
  12. 12. AIファイル JPEGファイル12年12月22日土曜日
  13. 13. JADE HTML12年12月22日土曜日
  14. 14. SASS CSS12年12月22日土曜日
  15. 15. Coffee Java Script Script12年12月22日土曜日
  16. 16. jQuery.js jQuery.min.js12年12月22日土曜日
  17. 17. 何かしらのツールなりで 変換させて使っている ※ 変換:コンパイル以外も含む12年12月22日土曜日
  18. 18. 面倒・・・12年12月22日土曜日
  19. 19. もっと楽にサイトを作りたい12年12月22日土曜日
  20. 20. HTTP://YEOMAN.IO12年12月22日土曜日
  21. 21. MY FEATURES • Lightning-fast scaffolding — Easily scaffold new projects with customizable templates (e.g HTML5 Boilerplate, Twitter Bootstrap), AMD (via RequireJS) and more. • Automatically compile CoffeeScript & Compass — Our LiveReload watch process automatically compiles source files and refreshes your browser whenever a change is made so you dont have to. • Automatically lint your scripts — All your scripts are automatically run against jshint to ensure theyre following language best-practices. • Built-in preview server — No more having to fire up your own HTTP Server. My built-in one can be fired with just one command. • Awesome Image Optimization — I optimize all your images using OptiPNG and JPEGTran so your users can spend less time downloading assets and more time using your app. • AppCache manifest generation — I generate your application cache manifests for you. Just build a project and boom. Youll get it for free. • Killer build process — Not only do you get minification and concatenation; I also optimize all your image files, HTML, compile your CoffeeScript and Compass files, generate you an application cache manifest and, if youre using AMD, well pass those modules through r.js so you dont have to. • Integrated package management — Need a dependency? Its just a keystroke away. I allow you to easily search for new packages via the command-line (e.g., yeoman search jquery), install them and keep them updated without needing to open your browser. • Support for ES6 module syntax — Experiment with writing modules using the latest ECMAScript 6 module syntax. This is an experimental feature that transpiles back to ES5 so you can use the code in all modern browsers. • PhantomJS Unit Testing — Easily run your unit tests in headless WebKit via PhantomJS. When you create a new application, I also include some test scaffolding for your app. VIA. HTTP://YEOMAN.IO12年12月22日土曜日
  22. 22. YEOMANインストール前チェック $ curl -L get.yeoman.io | bash ※ yeomanの全機能を使う場合は 表示されているすべてインストール12年12月22日土曜日
  23. 23. Yeomanの特徴12年12月22日土曜日
  24. 24. 強力なSCAFFOLDING $ yeoman init [quickstart] Webアプリケーションフォルダ等の ひな形が生成される12年12月22日土曜日
  25. 25. AUTO COMPILE CoffeeScriptやCompassを自動でコンパイルする12年12月22日土曜日
  26. 26. サーバいらず Yeomanはコマンドから ビルトインサーバーを起動することができる12年12月22日土曜日
  27. 27. 構文チェック JSHINTを使った構文チェック12年12月22日土曜日
  28. 28. 画像最適化 ビルドによって画像の最適化を行う12年12月22日土曜日
  29. 29. 自由なテンプレート フォルダ構成を自由にテンプレート化できる12年12月22日土曜日
  30. 30. 自動リロード ファイルの変更を監視し HTTPサーバの自動でリロード12年12月22日土曜日
  31. 31. パッケージ管理 ライブラリ/モジュールのインストールを 楽に管理できる12年12月22日土曜日
  32. 32. ES6サポート ECMAScript6をサポート12年12月22日土曜日
  33. 33. How to Yeoman12年12月22日土曜日
  34. 34. YEOMAN最短フロー $ yeoman init [quickstart] $ yeoman test $ yeoman server[:dist] $ yeoman build12年12月22日土曜日
  35. 35. YEOMANフォルダ構成 -appフォルダ #編集用フォルダ -tempフォルダ #開発用フォルダ -distフォルダ #本番設置用フォルダ12年12月22日土曜日
  36. 36. いろいろなジェネレータ # Generators for MVC/MV* Frameworks # Skip our questions and get a H5BP, jQuery and Modernizr base $ yeoman init quickstart # Backbone Boilerplate generator scaffold $ yeoman init bbb # Ember-Rails generator scaffold $ yeoman init ember # Backbone-Rails generator scaffold $ yeoman init backbone12年12月22日土曜日
  37. 37. ジェネレータテンプレート node_modules/yeoman/node_modules/yeoman- generators/lib/generators/xxxxxxx/ テンプレートとして追加すると 「yeoman init xxxxxxx」で実行可能12年12月22日土曜日
  38. 38. パッケージ管理 $ yeoman install # Install a package from the client-side package registry $ yeoman uninstall # Uninstall the package $ yeoman update # Update a package to the latest version $ yeoman list # List the packages currently installed $ yeoman search # Query the registry for matching package names $ yeoman lookup # Look up info on a particular package12年12月22日土曜日
  39. 39. Yeomanで利用している NPMモジュール12年12月22日土曜日
  40. 40. パッケージ管理 TWITTER BOWER HTTP://TWITTER.GITHUB.COM/BOWER/ COMPONENT.JSONでライブラリの管理を一元化12年12月22日土曜日
  41. 41. 自動コンパイル/ 自動リロード GRUNT HTTP://GRUNTJS.COM/ GURUNT.JSでタスクを管理 (YEOMANではGRUNTFILE.JS)12年12月22日土曜日
  42. 42. まとめ • クライアントサイドのテスト/ビルドツール • bower/gruntを利用している • 自動リロード12年12月22日土曜日
  43. 43. ご静聴ありがとうございました12年12月22日土曜日
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.