More than 5 years have passed since last update.

フロント開発環境構築

Last updated at 2018-11-08Posted at 2018-10-21

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

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/

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up