Download as PDF, PPTX
![強力なSCAFFOLDING
$ yeoman init [quickstart]
Webアプリケーションフォルダ等の
ひな形が生成される
12年12月22日土曜日](https://image.slidesharecdn.com/random-121221233219-phpapp02/75/WEB-YEOMAN-24-2048.jpg)
![YEOMAN最短フロー
$ yeoman init [quickstart]
$ yeoman test
$ yeoman server[:dist]
$ yeoman build
12年12月22日土曜日](https://image.slidesharecdn.com/random-121221233219-phpapp02/75/WEB-YEOMAN-34-2048.jpg)
WEBアプリケーションビルド・ テストツール YEOMAN
- 1. WEBアプリケーションビルド・ テストツール YEOMAN HighTech Osaka 2012.12.19 12年12月22日土曜日
- 2. 自己紹介 • かみやん (Twitter@kamiyam) • システム開発会社の一プログラマ • Webサービスつくってます 12年12月22日土曜日
- 3.
- 4. YEOMENとは？ Yeomanはツールやライブラリを 迅速で華麗にビルドし、Web環境を構築する ワークフローツールです。 12年12月22日土曜日
- 5.
- 6. ビルド【build】 ソースコードのコンパイルやライブラリのリンクなどを行 い、最終的な実行可能ファイルを作成すること。また、 そのような作業によって生成されたソフトウェアの版。 Via. IT用語辞典 12年12月22日土曜日
- 7. コンパイル？？？ リンク？？？ 12年12月22日土曜日
- 8. .java .class 12年12月22日土曜日
- 9. コンパイルとは 人様が読みやすい言葉を PC様がわかりやすい言葉に 変換する 12年12月22日土曜日
- 10. リンクとは ライブラリなどのファイル群 の関連付けを行うこと 12年12月22日土曜日
- 11.
- 12. AIファイル JPEGファイル 12年12月22日土曜日
- 13. JADE HTML 12年12月22日土曜日
- 14. SASS CSS 12年12月22日土曜日
- 15. Coffee Java Script Script 12年12月22日土曜日
- 16. jQuery.js jQuery.min.js 12年12月22日土曜日
- 17. 何かしらのツールなりで 変換させて使っている ※ 変換：コンパイル以外も含む 12年12月22日土曜日
- 18.
- 19.
- 20.
- 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. YEOMANインストール前チェック $ curl -L get.yeoman.io | bash ※ yeomanの全機能を使う場合は 表示されているすべてインストール 12年12月22日土曜日
- 23.
- 24. 強力なSCAFFOLDING $ yeoman init [quickstart] Webアプリケーションフォルダ等の ひな形が生成される 12年12月22日土曜日
- 25. AUTO COMPILE CoffeeScriptやCompassを自動でコンパイルする 12年12月22日土曜日
- 26. サーバいらず Yeomanはコマンドから ビルトインサーバーを起動することができる 12年12月22日土曜日
- 27. 構文チェック JSHINTを使った構文チェック 12年12月22日土曜日
- 28. 画像最適化 ビルドによって画像の最適化を行う 12年12月22日土曜日
- 29. 自由なテンプレート フォルダ構成を自由にテンプレート化できる 12年12月22日土曜日
- 30. 自動リロード ファイルの変更を監視し HTTPサーバの自動でリロード 12年12月22日土曜日
- 31. パッケージ管理 ライブラリ/モジュールのインストールを 楽に管理できる 12年12月22日土曜日
- 32. ES6サポート ECMAScript6をサポート 12年12月22日土曜日
- 33.
- 34. YEOMAN最短フロー $ yeoman init [quickstart] $ yeoman test $ yeoman server[:dist] $ yeoman build 12年12月22日土曜日
- 35. YEOMANフォルダ構成 -appフォルダ #編集用フォルダ -tempフォルダ #開発用フォルダ -distフォルダ #本番設置用フォルダ 12年12月22日土曜日
- 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. ジェネレータテンプレート node_modules/yeoman/node_modules/yeoman- generators/lib/generators/xxxxxxx/ テンプレートとして追加すると 「yeoman init xxxxxxx」で実行可能 12年12月22日土曜日
- 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. Yeomanで利用している NPMモジュール 12年12月22日土曜日
- 40. パッケージ管理 TWITTER BOWER HTTP://TWITTER.GITHUB.COM/BOWER/ COMPONENT.JSONでライブラリの管理を一元化 12年12月22日土曜日
- 41. 自動コンパイル/ 自動リロード GRUNT HTTP://GRUNTJS.COM/ GURUNT.JSでタスクを管理 (YEOMANではGRUNTFILE.JS) 12年12月22日土曜日
- 42. まとめ • クライアントサイドのテスト/ビルドツール • bower/gruntを利用している • 自動リロード 12年12月22日土曜日
- 43.