これからYeomanをインストールして実際にChromeアプリを作るところまでの手順を紹介したいと思います。
※ここではnode.jsとnpmが事前にインストールされていることを前提に話を進めます。
Yeomanをインストール
$sudo npm install -g yo依存する Grunt と Bower も入ります。 (npm 1.2.10 以上の場合)
Yeomanのインストールに失敗したら
もしあなたがnodeではなくnodejsの方を使っていれば、途中でこんなエラーが出てyeomanのインストールに失敗するかもしれません。
インストールに失敗すると yo コマンドを打った時に
そんなときは、
でnodejsへのシンボリックリンクを張ってから再度yoemanをインストールしてみましょう。
もしあなたがnodeではなくnodejsの方を使っていれば、途中でこんなエラーが出てyeomanのインストールに失敗するかもしれません。
...
> yo@1.1.2 postinstall /usr/local/lib/node_modules/yo
> node ./scripts/doctor
sh: 1: node: not found
npm WARN This failure might be due to the use of legacy binary "node"
npm WARN For further explanations, please read
/usr/share/doc/nodejs/README.Debian
...
インストールに失敗すると yo コマンドを打った時に
yo: command not found が発生します。そんなときは、
$ sudo ln -s /usr/bin/nodejs /usr/bin/nodeでnodejsへのシンボリックリンクを張ってから再度yoemanをインストールしてみましょう。
雛形Generatorをインストール
$ sudo npm install -g generator-chromeappYeomanでアプリの雛形を生成するためには対応するGeneratorをインストールする必要があります。
ここではChromeアプリのGeneratorをインストールしてみます。
※公式Generator一覧はYeoman Official Generatorsで確認できます。
プロジェクトを作成してビルドするまでの流れ
まずは適当にプロジェクト用フォルダを作って、
$ mkdir my-yo-project $ cd my-yo-project
Chromeアプリのひな形を生成
$ yo chromeapp質問に答えていくだけでChromeアプリのひな形が完成します。
アプリをデバッグ
$ grunt debugこの状態でいつものChromeアプリ開発のようにChromeブラウザの 設定 > ツール > 拡張機能 から パッケージ化されていない拡張機能を読み込む...を開いて、プロジェクトのappフォルダをルートとして開くとChromeにアプリが登録されます。登録したアプリを起動した状態でappフォルダ内のソースを修正すると変更が自動的にアプリに反映されます。
ビルドを実行
$ grunt buildjsコードの最適化（難読化やファイル結合など）が実行され、packageフォルダ内にzip化されたアプリが生成されます。このzipファイルはそのままChrome Web Storeへ公開することができます。
Yeomanの使い方は以上です。
おまけ：Bowerの使い方
Bowerはライブラリ管理ツールです。
普段の開発でプロジェクトにjsライブラリを追加する際には、サイトからライブラリ本体や依存ライブラリをダウンロードしてきてlibフォルダなどに設置し、htmlファイルにscriptタグで追加するという手順になりますが、Bowerはそのような面倒なステップを省略してくれます。
ライブラリを検索
$ bower search ライブラリ名の一部
ライブラリをインストール
$ bowser install ライブラリ名#バージョン
インストールされたライブラリ一覧を確認
$ bower list
ライブラリを最新バージョンにアップデート
$ bower update ライブラリ名
ライブラリをインポート
※現時点ではライブラリのインポートに対応していないGeneratorが多いようですが一応紹介しておきます。
index.htmlに追加
$ grunt bowerInstallRequireJSに追加
$ grunt bower
0 件のコメント:
コメントを投稿