Download - 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を作ろう
結構大変だけどね。。
ご清聴ありがとうございました