★sudo npm install -g bower
★sudo npm install -g yo
★sudo npm install -g grunt-cli gulp
★テスト実行環境のkarmaもインストール。
→sudo npm install -g karma インストールされたら、karma –version にてバージョンが表示される。
★あとは、mean.io用のmean-cliもインストール
→sudo npm install -g mean-cli （不要かも・・）
・アプリ用のディレクトリを作成の上、該当ディレクトリに移動し、yoコマンドを実施。
（yoの中でgenerator-AngularJSが見つからない場合は、事前にnpm install -g generator-AngularJSでインストールを実施）
・npm install grunt-karma –save-dev
・npm install
・bower install
・上記を外部サーバ（AWS）にインストールした場合は、Gruntfile.jsのhostnameを以下に変更→参考
→hostname: ‘0.0.0.0’
・grunt serve
・ブラウザアクセスで確認
●yeomanについて： Grunt、Bower、Yo から構成されている。npmからインストール。近ごろ複雑化しつつあるさまざまなフロントエンドプロジェクトのひな型を、対話形式のコマンドで簡単に生成できる。
★Bower： フロントエンド用のパッケージマネージャ。「bower.json」というプロジェクトの設定ファイルを作成して依存するリソースを記述します。その設定ファイルに従って、bowerコマンドを実行することで、ライブラリの取得や更新が可能。
npm install -g bower
bower -v
bower initでbower.jsonが生成される。
bower install underscore –save;実際にインストールされたライブラリは、「app/bower_components/underscore/」に配置される。
★Yo： プロジェクトの生成ツール。yoモジュールは「ジェネレーター」という仕組みを使って、アプリのひな型を生成する。ジェネレーターとは、Yoがひな型を生成するための定義を記述したNode.jsモジュールで、使用する用途／フレームワークに応じてさまざまな種類のものがある。
例えば、フロントエンド用JavaScriptフレームワークである「AngularJS」を使用したアプリのひな型を生成する場合は、ジェネレーター「generator-angular」を用いる。
npm install -g yo
質問に答えて、Install a generatorのところで「angular」を入力するとgenerator-angularが選択される。
★Grunt： 自動化のためのビルドツール（タスクランナー）とのこと→atmarkit
Gruntの設定ファイル（Gruntfile.js）はYeomanによって生成されることが多い。その際には必要なタスクがあらかじめ記述してあり、すぐに実行できるようになっている。
sudo npm install -g grunt-cli ←このページではsudoは使っていないが、使わないとエラとなる。
grunt -version
——-2017.12.24追記——
ディレクトリを作成しyoを作っても、何故かホームディレクトリにファイルが出来てしまうので、一旦sudo uninstall -g yoでyoをアンインストールした後、再度yoをインストール実施。
インストールの際に、下記メッセージが出たが、.yo-rc.jsonが悪さをしていたかもしれないので、.yo-rc.jsonも削除したところ、ちゃんと作成したディレクトリ配下にファイルが作成された。
We found a undefined file in your home directory. This can cause
issues by overriding expected default config. Prefer setting up one `.bowerrc` per
project.
To delete the file, run: rm ~/.bowerrc
? No .yo-rc.json file in home directory
Found a NaN file in your home directory. Delete it otherwise
Yeoman will generate everything in your home rather then your project folder.
To delete the file, run: rm ~/.yo-rc.json
? npm version
Found potential issues on your machine 🙁
＃併せて、ホームディレクトリにあった.bowerrc
{
“directory”: “bower_components”
}
も削除しておく。
——-2017.12.29追記——
yeomanが上手く作れなくなってしまったので、yo webappで試したところ上手くいった。
grunt ではなく、gulp serveにて実行。
コメントを残す