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