monacaのローカル開発環境構築

monacaのライブプレビュー便利ですよね
でも好きなエディタ使ったり、Gitで構成管理しながらやりたい所

monaca-cliを使えばそんな事も出来ます！！！！

Vimで編集、Chromeでレイアウト確認している例

ローカルで編集するメリット

• 好きなエディタで編集しながらブラウザでライブプレビューが出来る
• Gitなどの他のシステムとの連携もしやすい

ローカルで編集するデメリット

• スマートフォン毎のレイアウト確認ができない

Nodejsをインストールする

• npmでmonaca-cliをインストールするために必要
• Nodejs v8.11.0で動作確認済
• ここからダウンロードできます

monaca-cliをインストールする

コマンドラインで以下コマンドを実行

$ npm install -g monaca --unsafe-perm

※rootユーザーでの実行時には--unsafe-permが必要な場合あり

monaca-cliでmonacaにログインする

$ monaca login
# メールアドレスとパスワードを聞かれるので入力してEnter

monacaのプロジェクトをローカルにクローンする

$ monaca clone
# どのプロジェクトか聞かれるので選んでEnter
# 作成するディレクトリ名を聞かれるので、入力してEnter
# ディレクトリ名を入力しない場合はプロジェクト名と同じ名前になります。

ローカルの変更を適用する

$ cd [プロジェクトディレクトリ名]
$ monaca upload

ローカルのプロジェクトを最新の状態にする

$ cd [プロジェクトディレクトリ名]
$ monaca download

• 変更のあったファイルのみダウンロードされて配置される様です

サーバーを起動

$ cd [プロジェクトディレクトリ名]
$ npm run dev

レイアウトを確認する

• サーバーを起動した状態で行います
• http://localhost:8080に接続する事で確認できます
• サーバー起動中にソースを変更した場合、ブラウザで表示しているページも即座に更新されます（ライブプレビュー）

ローカルサーバを使ってレイアウト確認した時

monacaのサイトを使ってレイアウト確認した時

所感

• ライブプレビューできるの良い
  • browsersyncのおかげ
• monacaいらなくない？
  • 初期テンプレートや各デバイスに向けて簡単にデプロイ出来るのはやはり便利だと思います