yeomanハンズオン in 福岡

27
2014/03/15 (土) 13:00 - 18:00

Upload: fumio-sagawa

Post on 19-May-2015

1.123 views

Category:

Technology


2 download

TRANSCRIPT

Page 1: Yeomanハンズオン in 福岡

2014/03/15 (土) 13:00 - 18:00

Page 2: Yeomanハンズオン in 福岡

Profile: !

佐川 夫美雄

HTML5Expert.jpコントリビュータ html5jエンタープライズ部 副部長 Angularユーザ会 スタッフ Sencha UG CO-ORGANIZER

@albatrosary http://albatrosary.hateblo.jp/ http://html5experts.jp/albatrosary/

Page 3: Yeomanハンズオン in 福岡

13:00-14:00 ちょっとした説明(LT)

はじめに

Yeoman概要 - 佐川夫美雄

generatorを作る - 酒巻瑞穂さん

CSSコーディングを効率よくするおすすめプラグイン - 田村章吾さん

14:00-17:30 ハンズオン

!

!

17:30-18:00 やったこと発表

YEOMANをインストールして色んなgeneratorを使ってみよう generator-generatorを使ってみよう いろんなgruntを使ってみよう

http://albatrosary.hateblo.jp/archive/category/grunt

ご参考:https://github.com/MSakamaki/GeneratorAPI

ハンズオンの内容

Page 4: Yeomanハンズオン in 福岡

HTML CSS

JavaScript

Sass

CoffeeScript

backboneunderscore

jQueryrequire

Compass

image imagemin

htmlmincssmin

jsmin

mocha chaiテスト

Yuidoc

HTML5は簡単?

easymock

Page 5: Yeomanハンズオン in 福岡

開発環境のおはなし

http://yeoman.io/

多くのアーキテクチャをどうやって開発するか

Page 6: Yeomanハンズオン in 福岡

Yeoman とは

Google社が作成した総合開発ツール群

yo(雛形作成ツール)

grunt(タスクランナー)

bower(フロントエンドパッケージマネージャ)

MODERN WORKFLOWS FOR MODERN WEBAPPS

Page 7: Yeomanハンズオン in 福岡

開発の大まかな流れ

1. yo [generator] によるひな形

2. grunt server を使用しアプリケーション開発

3. grunt build によるリリースビルド

http://yeoman.io/

Page 8: Yeomanハンズオン in 福岡

これはですね。。

Javaのmavenみたいなもんです もうちょっと高機能かも

Page 9: Yeomanハンズオン in 福岡

インストールは簡単

使ってみる

$ npm install -g yo

Page 10: Yeomanハンズオン in 福岡

generator はどのくらいある? http://yeoman.io/community-generators.html

yo雛形作成ツール

Page 11: Yeomanハンズオン in 福岡

$ yo backbone

yo雛形作成ツール

Page 12: Yeomanハンズオン in 福岡

これだけで概ねの環境ができてしまう!

yo

Page 13: Yeomanハンズオン in 福岡

$ yo backbone:view view名 --coffee $ yo backbone:model model名 --coffee $ yo backbone:collection collection名 --coffee $ yo backbone:router router名 --coffee

yoテンプレートを作成する

Page 14: Yeomanハンズオン in 福岡

bowerTwitter社が作ったパッケージマネージャ

bower components はどのくらいあるか? http://bower.io/search/

Page 15: Yeomanハンズオン in 福岡

bower

依存関係およびライブラリの情報を管理するためのファイル

bower.jsonとは?

Page 16: Yeomanハンズオン in 福岡

bowerbackbonejsを作るときに必要なコンポーネント

{ "name": "backbone-app", "version": "0.0.0", "dependencies": { "sass-bootstrap": "~3.0.0", "jquery": "~1.9.0", "underscore": "~1.4.3", "backbone": "~1.0.0", "requirejs": "~2.1.5", "requirejs-text": "~2.0.5", "modernizr": "~2.6.2", "backbone.localStorage": "~1.1.7" }, "devDependencies": {} }

Page 17: Yeomanハンズオン in 福岡

bower

$ bower install !

このコマンドでbower.jsonに定義しているコンポーネントをダウンロードします

使い方

Page 18: Yeomanハンズオン in 福岡

bower

$ bower install --save-dev [パッケージ名] !

新しいコンポーネントをダウンロードしbower.jsonにその情報を書き込みます

使い方

Page 19: Yeomanハンズオン in 福岡

gruntタスクランナー

grunt で登録されているプラグインは? http://gruntjs.com/plugins

Page 20: Yeomanハンズオン in 福岡

gruntタスクランナー

gruntにはpackage.jsonとGruntfile.jsが必要

Page 21: Yeomanハンズオン in 福岡

gruntpackage.jsonとは?

必要なタスクプラグインを管理するためのファイル

Page 22: Yeomanハンズオン in 福岡

gruntpackage.jsonとは?

{ "name": "backbone-app", "version": "0.0.0", "dependencies": {}, "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-copy": "~0.4.0", "grunt-contrib-concat": "~0.3.0", "grunt-contrib-coffee": "~0.7.0", "grunt-contrib-jst": "~0.5.0", "grunt-contrib-uglify": "~0.2.0", "grunt-contrib-compass": "~0.5.0", "grunt-contrib-jshint": "~0.6.3", "grunt-contrib-cssmin": "~0.6.0", "grunt-contrib-connect": "~0.3.0", "grunt-contrib-clean": "~0.5.0", "grunt-contrib-htmlmin": "~0.1.3", "grunt-contrib-imagemin": "~0.2.0", "grunt-contrib-watch": "~0.5.2", "grunt-mocha": "~0.4.1", "grunt-usemin": "~0.1.10", "grunt-bower-requirejs": "~0.7.0", "grunt-requirejs": "~0.4.0", "grunt-rev": "~0.1.0", "grunt-open": "~0.2.0", "load-grunt-tasks": "~0.1.0", "connect-livereload": "~0.2.0", "time-grunt": "~0.2.1", "jshint-stylish": "~0.1.3" }, "engines": { "node": ">=0.8.0" } }

Page 23: Yeomanハンズオン in 福岡

grunt使い方は

$ npm install --save-dev [プラグイン名] !

新しいプラグインをダウンロードしpackage.jsonにその情報を書き込みます

Page 24: Yeomanハンズオン in 福岡

gruntGruntfile.jsとは?

タスクを定義したファイルです

Page 25: Yeomanハンズオン in 福岡

gruntGruntfile.jsとは?

コマンドがいろいろ定義していますが $ grunt serve $ grunt build $ grunt test これにモックアップ開発用に $ grunt mock

Page 26: Yeomanハンズオン in 福岡

Yeomanを使って効率良くHTML5を作ろう

結構大変だけどね。。

Page 27: Yeomanハンズオン in 福岡

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