Help us understand the problem. What is going on with this article?

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

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

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

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

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

  • 好きなエディタで編集しながらブラウザでライブプレビューが出来る
  • 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

レイアウトを確認する

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

image.png

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

image.png

所感

  • ライブプレビューできるの良い
    • browsersyncのおかげ
  • monacaいらなくない?
    • 初期テンプレートや各デバイスに向けて簡単にデプロイ出来るのはやはり便利だと思います
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした