Yeoman の yo で作成したアプリケーションを github へ登録します。
- テンプレートからプロジェクトの作成
- github にリポジトリ構築
- プロジェクトを git 配下の設定をする
いつものように適当なプロジェクトディレクトリを作成し yo コマンドによりアプリケーションを作成します。分かりやすくするためプロジェクトディレクトリと github のリポジトリ名は同じにしておくと良いと思います。
yo コマンドによるプロジェクトの作成
$ mkdir yeoapp $ cd yeoapp/ $ yo webapp ・・・ grunt-mocha@0.3.1 node_modules/grunt-mocha ├── mocha@1.8.2 (growl@1.7.0, debug@0.7.2, commander@0.6.1, diff@1.0.2, mkdirp@0.3.3, ms@0.3.0, jade@0.26.3) └── grunt-lib-phantomjs@0.3.0 (semver@1.0.14, eventemitter2@0.4.11, temporary@0.0.5, phantomjs@1.9.0-4) $
構築について特に問題となるところは無いと思います。grunt server すると
github でのリポジトリ作成
リポジトリ名をプロジェクト名で作成します。github はこれだけです。
クライアントで作成したプロジェクトを git 配下にする
クライアント側は基本的に github からもアナウンスがある通り、下記のように行います
touch README.md git init git add README.md git commit -m "first commit" git remote add origin git@github.com:albatrosary/yeoapp.git git push -u origin master
ここで考えることは、どのディレクトリ、ファイルを git 管理にするかということです。作成されたディレクトリとファイルを確認してみます。
$ ls -la total 80 drwxr-xr-x 15 albatrosary staff 510 5 21 11:18 . drwxr-xr-x 23 albatrosary staff 782 5 21 11:12 .. -rw-r--r-- 1 albatrosary staff 38 5 21 11:12 .bowerrc -rw-r--r-- 1 albatrosary staff 415 5 21 11:12 .editorconfig -rw-r--r-- 1 albatrosary staff 11 5 21 11:12 .gitattributes -rw-r--r-- 1 albatrosary staff 50 5 21 11:12 .gitignore -rw-r--r-- 1 albatrosary staff 408 5 21 11:12 .jshintrc drwxr-xr-x 4 albatrosary staff 136 5 21 11:18 .sass-cache drwxr-xr-x 4 albatrosary staff 136 5 21 11:18 .tmp -rw-r--r-- 1 albatrosary staff 10461 5 21 11:12 Gruntfile.js drwxr-xr-x 11 albatrosary staff 374 5 21 11:12 app -rw-r--r-- 1 albatrosary staff 204 5 21 11:12 component.json drwxr-xr-x 27 albatrosary staff 918 5 21 11:12 node_modules -rw-r--r-- 1 albatrosary staff 929 5 21 11:12 package.json drwxr-xr-x 5 albatrosary staff 170 5 21 11:12 test $
いいファイルが yo により生成されてます。.gitignore と .gitattributes です。
.gitignore ファイルは git に無視させるディレクトリおよびファイルを定義するものです。中を見てみます。
$ cat .gitignore node_modules dist .tmp .sass-cache app/components $
git で管理するには必要でないものが列記されてます。
次に .gitattributes ですが、これは git 属性を定義するファイルです。詳しくはここを見て下さい。中を見てみます
$ cat .gitattributes * text=auto $
ここまで準備してくれているなん yo さん素敵です。では git 初期化を行い github のリポジトリへ push します。
$ touch README.md $ git init Initialized empty Git repository in /Users/albatrosary/temp/yeoapp/.git/ $ git add . $ git commit -m "first commit" [master (root-commit) f5eaf91] first commit 26 files changed, 12923 insertions(+) create mode 100644 .bowerrc create mode 100644 .editorconfig create mode 100644 .gitattributes create mode 100644 .gitignore create mode 100644 .jshintrc create mode 100644 Gruntfile.js create mode 100644 README.md create mode 100644 app/.htaccess create mode 100644 app/404.html create mode 100644 app/favicon.ico create mode 100644 app/images/glyphicons-halflings-white.png create mode 100644 app/images/glyphicons-halflings.png create mode 100644 app/index.html create mode 100644 app/robots.txt create mode 100644 app/scripts/app.js create mode 100644 app/scripts/hello.coffee create mode 100644 app/scripts/main.js create mode 100644 app/scripts/vendor/bootstrap.js create mode 100644 app/styles/main.scss create mode 100644 component.json create mode 100644 package.json create mode 100644 test/index.html create mode 100644 test/lib/chai.js create mode 100644 test/lib/expect.js create mode 100644 test/lib/mocha/mocha.css create mode 100644 test/lib/mocha/mocha.js create mode 100644 test/spec/test.js $ git remote add origin git@github.com:albatrosary/yeoapp.git $ git push -u origin master Counting objects: 38, done. Delta compression using up to 4 threads. Compressing objects: 100% (30/30), done. Writing objects: 100% (38/38), 91.72 KiB, done. Total 38 (delta 0), reused 0 (delta 0) To git@github.com:albatrosary/yeoapp.git * [new branch] master -> master Branch master set up to track remote branch master from origin. $
git push したので github リポジトリを確認します。
ここまでのまとめ
yo さんが適切にディレクトリを指定しているので、あまり考えずに github へ登録するディレクトリファイルを指定することが出来ます。必要に応じて .gitignore を編集すればプロジェクトチームのポリシーが定義出来ると思います。
github から作成したアプリケーションを clone し yeoman で使う
手順はやはりシンプルで
- git clone の実施
- npm install & bower install
だけです。
$ git clone git@github.com:albatrosary/yeoapp.git Cloning into 'yeoapp'... remote: Counting objects: 38, done. remote: Compressing objects: 100% (30/30), done. remote: Total 38 (delta 0), reused 38 (delta 0) Receiving objects: 100% (38/38), 91.72 KiB | 21 KiB/s, done. $
続いてコンポーネントのインストールです。
$ cd yeoapp $ npm install & bower install [1] 9597 npm WARN package.json yeoapp@0.0.0 No README.md file found! npm http GET https://registry.npmjs.org/grunt-contrib-concat npm http GET https://registry.npmjs.org/grunt-contrib-coffee npm http GET https://registry.npmjs.org/grunt-contrib-connect npm http GET https://registry.npmjs.org/grunt-contrib-uglify npm http GET https://registry.npmjs.org/grunt-contrib-compass npm http GET https://registry.npmjs.org/grunt-contrib-clean npm http GET https://registry.npmjs.org/grunt-contrib-htmlmin npm http GET https://registry.npmjs.org/grunt-contrib-imagemin npm http GET https://registry.npmjs.org/grunt-contrib-jshint npm http GET https://registry.npmjs.org/grunt-contrib-livereload npm http GET https://registry.npmjs.org/grunt-bower-requirejs npm http GET https://registry.npmjs.org/grunt-rev npm http GET https://registry.npmjs.org/grunt-usemin npm http GET https://registry.npmjs.org/grunt-regarde ・・・ ├── gzip-js@0.3.2 (crc32@0.2.2, deflate-js@0.2.3) ├── cheerio@0.10.8 (entities@0.3.0, underscore@1.4.4, cheerio-select@0.0.3, htmlparser2@2.6.0) ├── domino@1.0.11 ├── grunt-backbonebuilder@0.1.4 (backbone@0.9.10, grunt@0.3.17) ├── grunt-lodashbuilder@0.1.7 (semver@1.1.4, wrench@1.4.4, grunt-contrib-watch@0.2.0, uglify-js@1.3.4, grunt-contrib-jshint@0.1.1, lodash@1.2.1, grunt-contrib-nodeunit@0.1.2, node-minify@0.6.1) └── grunt-jquerybuilder@0.1.4 (grunt-contrib-watch@0.2.0, grunt-contrib-jshint@0.1.1, grunt-contrib-nodeunit@0.1.2, jquery-builder@0.1.0) $
終わったら grunt server を実行します。
これは Gruntfile.js と package.json 、component.json に従い grunt が必要なコンポーネントを再生成してくれたおかげです。各ファイルについては Yeoman のサイトを確認して下さい。Gruntfile.js でタスクを実行し必要なコンポーネント定義は component.json 、package.json です。参考までに component.json を見てみます。
$ cat component.json
{
"name": "yeoapp",
"version": "0.0.0",
"dependencies": {
"sass-bootstrap": "~2.3.0",
"requirejs": "~2.1.4",
"modernizr": "~2.6.2",
"jquery": "~1.9.1"
},
"devDependencies": {}
}
$
yeoapp アプリケーションに関する情報が記載されています。
最後に
Yeoman には、CoffeeScript、Sassなどのコンパイル環境が整っていて、かつ画像の圧縮、JavaScriptのビルド、今回行ったような git 環境までも整っています。
始めた頃は大規模開発には向かないのではと思ってましたが、予想を遥かに上回るツールであることが分かりました。
