備忘録として自分用にフロント開発環境構築方法です。
もくじ
- 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 の順でインストール
- Node.jsをMacにインストールしてnpmを使えるようにする - Hirooooo’s Labo
- nodebrew install が Failed to create the file と怒られる。 - YuG1224 blog
隠しファイル表示
.bash_profile を確認したいので、以下のコマンドで隠しファイルを表示
defaults write com.apple.finder AppleShowAllFiles TRUE
↓
killall Finder
.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 について
- mac os x の.bashrcの設定方法と反映方法 - エンターテイメント!!
- Node.js - gulpが(多分)インストールできたのに、gulp: command not foundと言われるのは何故でしょう…?について(100638)|teratail
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
gulp
gulp をv3からv4にバージョンアップしたら怒られた。
- 【gulp】gulp@4.0.0にしたら
AssertionError [ERR_ASSERTION]: Task function must be specified
と怒られる - gulp v4.0.0がプレリリース! 移行方法と変更点まとめ
ローカル開発環境
ローカルの画面をスマホの実機でも確認したい
ifconfig
で IPアドレスを取得
inet 192.168.xxx.xxx
取得したIPアドレスを以下のように書き換えれば、スマホでも確認できる。
http://localhost:3000/
↓
http://192.168.xxx.xxx:3000/