フロント開発環境構築

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

## もくじ
- 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)"
```

- [Mac の開発を便利にするパッケージ管理ソフト Homebrew のインストール手順 | WEB ARCH LABO](https://weblabo.oscasierra.net/homebrew-1/)
- [Homebrewをアンインストールするには](https://qiita.com/UmedaTakefumi/items/dc52f008586cbf06582f)

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

```
brew doctor
Your system is ready to brew.
```

- [Homebrewの問題を確認する"brew doctor"コマンドとWarning対策集[macOS]](https://ichibariki.hatenablog.com/entry/2018/03/24/213524)
- [Homebrew のエラーとその対処](http://amzwfox.hateblo.jp/entry/2015/03/13/124536)

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

- [Node.jsをMacにインストールしてnpmを使えるようにする - Hirooooo’s Labo](https://www.hirooooo-lab.com/entry/development/install-node)
- [nodebrew install が Failed to create the file と怒られる。 - YuG1224 blog](https://blog.yug1224.com/archives/5693a5e0fef2539c7d5b149d/)

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

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

[【Mac】隠しファイル・隠しフォルダを表示する方法](https://qiita.com/TsukasaHasegawa/items/fa8e783a556dc1a08f51)

## .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](http://motomichi-works.hatenablog.com/entry/2016/03/02/103207)

### .bash について
- [mac os x の.bashrcの設定方法と反映方法 - エンターテイメント！！](http://suzaku-tec.hatenadiary.jp/entry/2017/01/03/075136)
- [Node.js - gulpが（多分）インストールできたのに、gulp: command not foundと言われるのは何故でしょう…？について(100638)｜teratail](https://teratail.com/questions/100638)

## node

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

[Node.jsをMacにインストールしてnpmを使えるようにする - Hirooooo’s Labo](https://www.hirooooo-lab.com/entry/development/install-node)

```
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コマンド](https://qiita.com/yuch_i/items/3d5f562ac49e81705010)


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

- [【gulp】gulp@4.0.0にしたら`AssertionError [ERR_ASSERTION]: Task function must be specified`と怒られる](http://tweeeety.hateblo.jp/entry/2018/06/18/044847)
- [gulp v4.0.0がプレリリース！ 移行方法と変更点まとめ](https://satoyan419.com/gulp-v4/)


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

`ifconfig ` で IPアドレスを取得

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

```
http://localhost:3000/ 
↓
http://192.168.xxx.xxx:3000/
```