INNOBASE技術ブログ

技術的なことエンジニア的なこと制作的なこと全般

yeoman + gruntで、cordova + ionicアプリの開発環境を構築

以前の記事でcordova+ionicの環境構築を紹介させて頂きましたが、ionicコマンドで非常に簡単でプロジェクトを作成できます。ただし、ionicコマンドよりフロントエンジニアが馴染みのあるyeomanとgruntで構築できたら、もっと嬉しいでしょうか

早速、構築手順を紹介します。

Node.jsとAndroid SDKは予めインストールする必要があるので、
事前にインストールしてください。

brew install node
brew install android-sdk

npm installはsudoで実行すると、権限問題が発生するので、
事前に操作するユーザに権限を付与してくださ。

sudo chown -R $USER /usr/local

では、構築しましょう

# 新プロジェクト用ディレクトリを作成
mkdir hello
cd hello


# npmで必要なモジュールをインストール
npm install -g bower grunt-cli yo yeoman-generator
npm install -g cordova
npm install grunt generator-ionic
npm install karma-junit-reporter --save-dev


# yoでionicテンプレートを使って構築
yo ionic // いくつか質問されるけど、利用状況に合わせて回答してください。


# 対応するプラットフォームを追加
cordova platform add ios
cordova platform add android

よし、いつも通りにgrunt serveを使って、ブラウザで動作確認できるし、
そして、grunt karma:unitで単体テストも実行できます。