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

43
WEBアプリケーションビルド・ テストツール YEOMAN HighTech Osaka 2012.12.19 121222日土曜日

description

HiphTech Osaka

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

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

自己紹介

•かみやん (Twitter@kamiyam)•システム開発会社の一プログラマ•Webサービスつくってます

12年12月22日土曜日

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

HTTP://YEOMAN.IO

12年12月22日土曜日

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

YEOMENとは?

Yeomanはツールやライブラリを迅速で華麗にビルドし、Web環境を構築する

ワークフローツールです。

12年12月22日土曜日

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

その前に、ビルドって?

12年12月22日土曜日

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

コンパイル???リンク???

12年12月22日土曜日

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

.java .class

12年12月22日土曜日

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

人様が読みやすい言葉をPC様がわかりやすい言葉に

変換する

コンパイルとは

12年12月22日土曜日

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

ライブラリなどのファイル群の関連付けを行うこと

リンクとは

12年12月22日土曜日

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

WEBサイトに置き換える

12年12月22日土曜日

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

AIファイル JPEGファイル

12年12月22日土曜日

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

JADE HTML

12年12月22日土曜日

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

SASS CSS

12年12月22日土曜日

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

CoffeeScript

JavaScript

12年12月22日土曜日

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

jQuery.js jQuery.min.js

12年12月22日土曜日

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

何かしらのツールなりで変換させて使っている※ 変換:コンパイル以外も含む

12年12月22日土曜日

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

面倒・・・

12年12月22日土曜日

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

もっと楽にサイトを作りたい

12年12月22日土曜日

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

HTTP://YEOMAN.IO

12年12月22日土曜日

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

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

YEOMANインストール前チェック

$ curl -L get.yeoman.io | bash

※ yeomanの全機能を使う場合は表示されているすべてインストール

12年12月22日土曜日

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

Yeomanの特徴

12年12月22日土曜日

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

強力なSCAFFOLDING

$ yeoman init [quickstart]

Webアプリケーションフォルダ等のひな形が生成される

12年12月22日土曜日

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

AUTO COMPILE

CoffeeScriptやCompassを自動でコンパイルする

12年12月22日土曜日

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

サーバいらずYeomanはコマンドから

ビルトインサーバーを起動することができる

12年12月22日土曜日

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

構文チェック

JSHINTを使った構文チェック

12年12月22日土曜日

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

画像最適化

ビルドによって画像の最適化を行う

12年12月22日土曜日

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

自由なテンプレート

フォルダ構成を自由にテンプレート化できる

12年12月22日土曜日

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

自動リロード

ファイルの変更を監視しHTTPサーバの自動でリロード

12年12月22日土曜日

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

パッケージ管理ライブラリ/モジュールのインストールを

楽に管理できる

12年12月22日土曜日

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

ES6サポート

ECMAScript6をサポート

12年12月22日土曜日

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

How to Yeoman

12年12月22日土曜日

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

YEOMAN最短フロー$ yeoman init [quickstart]$ yeoman test$ yeoman server[:dist]$ yeoman build

12年12月22日土曜日

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

YEOMANフォルダ構成

-appフォルダ#編集用フォルダ

-tempフォルダ#開発用フォルダ

-distフォルダ#本番設置用フォルダ

12年12月22日土曜日

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

いろいろなジェネレータ# 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

ジェネレータテンプレートnode_modules/yeoman/node_modules/yeoman-generators/lib/generators/xxxxxxx/

テンプレートとして追加すると「yeoman init xxxxxxx」で実行可能

12年12月22日土曜日

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

パッケージ管理$ 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

Yeomanで利用しているNPMモジュール

12年12月22日土曜日

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

パッケージ管理TWITTER BOWER

HTTP://TWITTER.GITHUB.COM/BOWER/

COMPONENT.JSONでライブラリの管理を一元化

12年12月22日土曜日

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

自動コンパイル/ 自動リロードGRUNT

HTTP://GRUNTJS.COM/

GURUNT.JSでタスクを管理(YEOMANではGRUNTFILE.JS)

12年12月22日土曜日

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

まとめ

•クライアントサイドのテスト/ビルドツール

• bower/gruntを利用している

•自動リロード

12年12月22日土曜日

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

ご静聴ありがとうございました

12年12月22日土曜日