Successfully reported this slideshow.

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

32

Share

Loading in …3
×
1 of 43
1 of 43

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

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

  1. 1. WEBアプリケーションビルド・ テストツール YEOMAN HighTech Osaka 2012.12.19 12年12月22日土曜日
  2. 2. 自己紹介 • かみやん (Twitter@kamiyam) • システム開発会社の一プログラマ • Webサービスつくってます 12年12月22日土曜日
  3. 3. HTTP://YEOMAN.IO 12年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 .class 12年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 HTML 12年12月22日土曜日
  14. 14. SASS CSS 12年12月22日土曜日
  15. 15. Coffee Java Script Script 12年12月22日土曜日
  16. 16. jQuery.js jQuery.min.js 12年12月22日土曜日
  17. 17. 何かしらのツールなりで 変換させて使っている ※ 変換:コンパイル以外も含む 12年12月22日土曜日
  18. 18. 面倒・・・ 12年12月22日土曜日
  19. 19. もっと楽にサイトを作りたい 12年12月22日土曜日
  20. 20. HTTP://YEOMAN.IO 12年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 don't have to. • Automatically lint your scripts — All your scripts are automatically run against jshint to ensure they're 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. You'll 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 you're using AMD, we'll pass those modules through r.js so you don't have to. • Integrated package management — Need a dependency? It's 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.IO 12年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 Yeoman 12年12月22日土曜日
  34. 34. YEOMAN最短フロー $ yeoman init [quickstart] $ yeoman test $ yeoman server[:dist] $ yeoman build 12年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 backbone 12年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 package 12年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日土曜日

×