albatrosary's blog

UI/UXとエンタープライズシステム

Yeoman で作ったアプリケーションを github へ登録する

Yeoman の yo で作成したアプリケーションを github へ登録します。

  1. テンプレートからプロジェクトの作成
  2. github にリポジトリ構築
  3. プロジェクトを 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 すると

f:id:albatrosary:20130521112002p:plain

f:id:albatrosary:20130521112010p:plain

github でのリポジトリ作成

リポジトリ名をプロジェクト名で作成します。github はこれだけです。

f:id:albatrosary:20130521112844p:plain

クライアントで作成したプロジェクトを 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 リポジトリを確認します。

f:id:albatrosary:20130521115528p:plain

ここまでのまとめ

yo さんが適切にディレクトリを指定しているので、あまり考えずに github へ登録するディレクトリファイルを指定することが出来ます。必要に応じて .gitignore を編集すればプロジェクトチームのポリシーが定義出来ると思います。

 

github から作成したアプリケーションを clone し yeoman で使う

手順はやはりシンプルで

  1. git clone の実施
  2. 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 を実行します。

f:id:albatrosary:20130521135947p:plain

これは 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 環境までも整っています。

始めた頃は大規模開発には向かないのではと思ってましたが、予想を遥かに上回るツールであることが分かりました。