11
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

yeoman入門

yeomanの簡単な使い方をメモ。
osはCentOS6.5です。
公式ホームページ:http://yeoman.io/

概要

以下の3つのコマンドを使って、web開発を効率化する。

yo(おじさん):雛形作成
bower(鳥):パッケージ管理
grunt(猪):ビルド

インストール

node.jsを利用するので、インストール済みであること。
-gオプションはグローバルインストール。
パスの通ったディレクトリにインストールされ、全ユーザから利用できる。

$ npm install -g yo bower grunt-cli

雛形インストール

yoで使う雛形をインストールする。
雛形は http://yeoman.io/generators/ から検索できる。
↓は、webアプリケーション基本の雛形(jqueryやbootstrapを含む)をインストールする例。

$ npm install -g generator-webapp

プロジェクト作成

yoで指定する雛形はインストール時のgenerator-を除いた部分。
利用するパッケージを指定して、enter。

$ mkdir yo-test
$ cd yo-test
$ yo webapp

パッケージの追加

雛形に個別にパッケージを追加することができる。
パッケージ名はbower search [パッケージ名]で検索可能。
↓は、underscore.jsを追加する例。

$ bower install underscore --save

実行

デフォルト http://localhost:9000 でアクセス可能なwebサーバを立ち上げることができる。
localhost以外から接続する場合、Gruntfile.jsconnect.options.hostname0.0.0.0に修正した後にコマンドを実行。
ファイアウォールがある場合は、ポートも開けておくこと。

$ grunt serve

テスト

ビルドで必要なので、ビルド前に実行しておく。

$ grunt test

ビルド

ディレクトリdistに最適化されたモジュールが生成されるので、それをリリースする。

$ grunt
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
11
Help us understand the problem. What are the problem?