1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

フロント開発環境構築

Last updated at Posted at 2018-10-21

備忘録として自分用にフロント開発環境構築方法です。

もくじ

  • xcode
  • Homebrew
  • nodebrew
  • 隠しファイル表示
  • .bash_profileの設定
  • node
  • npm
  • ローカル開発環境(編集中)

xcode / Homebrew

xcode で Homebrew をインストール

Homebrew のインストール

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Homebrew のアンインストール

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/uninstall)"

homebrew の状態を確認
エラーが出る場合は、下記のリンクを参考
エラーに出てくるファイルを削除したら解決

brew doctor
Your system is ready to brew.

nodebrew / node.js

Homebrew > nodebrew > node.js の順でインストール

隠しファイル表示

.bash_profile を確認したいので、以下のコマンドで隠しファイルを表示

defaults write com.apple.finder AppleShowAllFiles TRUE
↓
killall Finder

【Mac】隠しファイル・隠しフォルダを表示する方法

.bash_profile を設定

node のパス合わせに必要
.bash_profile はターミナルが起動すると読み込まれる

以下のコマンドで操作

ls -al フォルダ内のファイルを全部表示
vi ~/.bash_profile
i でインサートモード(書き込める状態)
esc でインサートモード解除(書き込み不可)
:wq で保存して終了
source ~/.bash_profile
cd ~/
open .

※~/ はユーザー配下
※open ファイルで開ける

【重要】.bash_profile の末尾に以下をコピペして node のパスを通す

export PATH=$HOME/.nodebrew/current/bin:$PATH
export PATH=/Users/username/npm/bin:$PATH

MacでPATHを通す .bash_profileの作成と編集 - Motomichi Works Blog

.bash について

node

nodebrew で node の安定板をインストール

Node.jsをMacにインストールしてnpmを使えるようにする - Hirooooo’s Labo

nodebrew install-binary vx.xx.x

Failed to create the file

と怒られるので、nodebrew フォルダを作成して再挑戦

mkdir ~/.nodebrew
mkdir ~/.nodebrew/src

nodebrew の状態確認 / インストールした node のバージョン確認

nodebrew ls
nodebrew use vx.xx.x

node のバージョン確認

node -v
- > vx.xx.x

npm

パッケージを使用するのに必要
node.js インストール時に npm も一緒にインストールされる
npm のバージョン確認

npm -v

エラーが出たらupdate

npm update -g npm

よく使うnpmコマンド

gulp

gulp をv3からv4にバージョンアップしたら怒られた。

ローカル開発環境

ローカルの画面をスマホの実機でも確認したい

ifconfig で IPアドレスを取得

inet 192.168.xxx.xxx

取得したIPアドレスを以下のように書き換えれば、スマホでも確認できる。

http://localhost:3000/ 
↓
http://192.168.xxx.xxx:3000/
1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?