yeomanハンズオン in 福岡

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

Profile: !

佐川　夫美雄

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

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

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

ハンズオンの内容

HTML CSS

JavaScript

Sass

CoffeeScript

backboneunderscore

jQueryrequire

Compass

image imagemin

htmlmincssmin

jsmin

mocha chaiテスト

Yuidoc

HTML5は簡単？

easymock

開発環境のおはなし

http://yeoman.io/

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

Yeoman とは

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

yo(雛形作成ツール)

grunt(タスクランナー)

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

MODERN WORKFLOWS FOR MODERN WEBAPPS

開発の大まかな流れ

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

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

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

http://yeoman.io/

これはですね。。

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

インストールは簡単

使ってみる

$ npm install -g yo

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

yo雛形作成ツール

$ yo backbone

yo雛形作成ツール

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

yo

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

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

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

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

bower

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

bower.jsonとは？

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": {} }

bower

$ bower install !

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

使い方

bower

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

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

使い方

gruntタスクランナー

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

gruntタスクランナー

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

gruntpackage.jsonとは？

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

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" } }

grunt使い方は

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

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

gruntGruntfile.jsとは？

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

gruntGruntfile.jsとは？

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

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

結構大変だけどね。。

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