Yeomanハンズオン in 福岡
Upcoming SlideShare
Loading in...5
×
 

Yeomanハンズオン in 福岡

on

  • 1,337 views

 

Statistics

Views

Total Views
1,337
Views on SlideShare
1,118
Embed Views
219

Actions

Likes
3
Downloads
14
Comments
0

5 Embeds 219

http://albatrosary.hateblo.jp 209
https://twitter.com 4
http://blog.hatena.ne.jp 3
http://feedly.com 2
http://www.slideee.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Yeomanハンズオン in 福岡 Yeomanハンズオン in 福岡 Presentation Transcript

  • 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 backbone underscore jQuery require Compass image imagemin htmlmin cssmin 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 テンプレートを作成する
  • bower Twitter社が作ったパッケージマネージャ bower components はどのくらいあるか? http://bower.io/search/
  • bower 依存関係およびライブラリの情報を管理するためのファイル bower.jsonとは?
  • bower backbonejsを作るときに必要なコンポーネント { "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が必要
  • grunt package.jsonとは? 必要なタスクプラグインを管理するためのファイル
  • grunt package.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にその情報 を書き込みます
  • grunt Gruntfile.jsとは? タスクを定義したファイルです
  • grunt Gruntfile.jsとは? コマンドがいろいろ定義していますが $ grunt serve $ grunt build $ grunt test これにモックアップ開発用に $ grunt mock
  • Yeomanを使って効率良くHTML5を作ろう 結構大変だけどね。。
  • ご清聴ありがとうございました