MEAN.IOでnpmでjavascriptのパッケージインストール・インポート

件名の通り

まずは、入れたいパッケージをnpmでインストール

/app.jsの上の方に

して

angular-translateを/bundle/app.jsにもとめて入れ込んでくれる。

mean.ioのデフォルトでインストールした状態なら

/packages/custom/…./server/views/includes/foot.html

と書かれているはず。

gulpでbowerのパッケージを自動挿入

gulp-injectを使う。

インストール(開発環境だけでいいので、–save-dev)

挿入されるhtmlを編集

パッケージの挿入先を指し示すためgulpfile.js編集

取り敢えずテスト的にbower

リターン連続

でangular-translateをインストール

bower.jsonを確認

dependenciesに挿入されて

bower_componentsフォルダにangular-translateがインストールされているのを確認。

では、gulp wiredepを実行。

↓はhead.html, foot.htmlに設置

これでちゃんとhead.html, foot.htmlにbowerからのcss, javascriptが挿入されていることを確認。

基本は相対パスで挿入されてしまう。

絶対パスがいいので↓のようにgulpfile.jsを変更

 

 

 

Vagrantの共有フォルダでNode.jsを編集するたびに自動再起動する

結論から、

私の結論としてはnodemonを使うしかないかと。

ソース監視の方式に

nodemon

supervisor

node-dev

pm2

っといったアプリがありますが、すべてデフォルトではVagrantの共有フォルダに反応してくれません。

試行錯誤で結局全て試してしまったので、紹介する。

Nodemonをインストール

nodemonをインストール

後はnodeコマンドの代わりにnodemonを使うだけ

これがスタンダードなやり方。

VagrantのSynced folderを使っている場合には遅くするために”L”というオプションをつけて、

っとしなくてはいけないのですが、これが何故か上手くいかない。

何故かと言うと、↑のコマンドではファイルの更新を監視する対象(watch)

が「*.*」っとなっている、これでは同階層のファイルに対する変更しか監視しない。

監視したい対象は自分で指定する必要がある。

私の場合はこんな感じ。

これでOK。

Vagrantの共有フォルダで更新を監視したいだけなら、ココまでの部分でOK。

以降は蛇足。

Supervisorのインストール。

supervisorをインストールした。

無視するファイルとディレクトリの指定は -i

npmでインストールをかけたときに異常に再起動しないために

としてみたけど、結局VagrantのSynced Folderでは、これも結局使えない。

Node-devのインストール

PM2のインストール

$ npm install pm2 -g

こうです。

そうするとこう。

ただひとつ残念なのが、今まで標準出力でリアルタイムに監視できてたログが見えなくなってしまうこと、標準出力がどこに言っているかというと

~/.pm2/logs/ ここ

ここに、

エラー:server-error-0.log

標準出力:server-out-0.log

っとわけて収納されている。

リアルタイム監視をしたいなら

っとすればリアルタイム監視ができます。

pm2での監視もういいよってなったらこう。

ただSynced Folderで使えない。