WEBアプリケーションビルド・ テストツール YEOMAN
description
Transcript of WEBアプリケーションビルド・ テストツール YEOMAN
WEBアプリケーションビルド・テストツール YEOMAN
HighTech Osaka2012.12.19
12年12月22日土曜日
自己紹介
•かみやん (Twitter@kamiyam)•システム開発会社の一プログラマ•Webサービスつくってます
12年12月22日土曜日
YEOMENとは?
Yeomanはツールやライブラリを迅速で華麗にビルドし、Web環境を構築する
ワークフローツールです。
12年12月22日土曜日
その前に、ビルドって?
12年12月22日土曜日
ビルド【build】
ソースコードのコンパイルやライブラリのリンクなどを行い、最終的な実行可能ファイルを作成すること。また、そのような作業によって生成されたソフトウェアの版。
Via. IT用語辞典
12年12月22日土曜日
コンパイル???リンク???
12年12月22日土曜日
.java .class
12年12月22日土曜日
人様が読みやすい言葉をPC様がわかりやすい言葉に
変換する
コンパイルとは
12年12月22日土曜日
ライブラリなどのファイル群の関連付けを行うこと
リンクとは
12年12月22日土曜日
WEBサイトに置き換える
12年12月22日土曜日
AIファイル JPEGファイル
12年12月22日土曜日
JADE HTML
12年12月22日土曜日
SASS CSS
12年12月22日土曜日
CoffeeScript
JavaScript
12年12月22日土曜日
jQuery.js jQuery.min.js
12年12月22日土曜日
何かしらのツールなりで変換させて使っている※ 変換:コンパイル以外も含む
12年12月22日土曜日
面倒・・・
12年12月22日土曜日
もっと楽にサイトを作りたい
12年12月22日土曜日
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日土曜日
YEOMANインストール前チェック
$ curl -L get.yeoman.io | bash
※ yeomanの全機能を使う場合は表示されているすべてインストール
12年12月22日土曜日
Yeomanの特徴
12年12月22日土曜日
強力なSCAFFOLDING
$ yeoman init [quickstart]
Webアプリケーションフォルダ等のひな形が生成される
12年12月22日土曜日
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 Yeoman
12年12月22日土曜日
YEOMAN最短フロー$ yeoman init [quickstart]$ yeoman test$ yeoman server[:dist]$ yeoman build
12年12月22日土曜日
YEOMANフォルダ構成
-appフォルダ#編集用フォルダ
-tempフォルダ#開発用フォルダ
-distフォルダ#本番設置用フォルダ
12年12月22日土曜日
いろいろなジェネレータ# 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日土曜日
ジェネレータテンプレートnode_modules/yeoman/node_modules/yeoman-generators/lib/generators/xxxxxxx/
テンプレートとして追加すると「yeoman init xxxxxxx」で実行可能
12年12月22日土曜日
パッケージ管理$ 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日土曜日
Yeomanで利用しているNPMモジュール
12年12月22日土曜日
パッケージ管理TWITTER BOWER
HTTP://TWITTER.GITHUB.COM/BOWER/
COMPONENT.JSONでライブラリの管理を一元化
12年12月22日土曜日
自動コンパイル/ 自動リロードGRUNT
HTTP://GRUNTJS.COM/
GURUNT.JSでタスクを管理(YEOMANではGRUNTFILE.JS)
12年12月22日土曜日
まとめ
•クライアントサイドのテスト/ビルドツール
• bower/gruntを利用している
•自動リロード
12年12月22日土曜日
ご静聴ありがとうございました
12年12月22日土曜日