Laravel Mixのインストール

##はじめに
###Laravel Mixとは... [＊1]
・Laravel Mixとは、フロントエンドのアセットをコンパイル、バンドルしてくれるツール
・ツールの中身はwebpackを利用している
・webpack設定ファイルをより分かりやすく簡単に書けるように設定ファイルをラップしている
・lessやsass、babelなどよく使われるローダーが最初から用意されていて、デフォルトで利用することができる
・Laravelを使っていないアプリでも、コンパイル・バインディングのツールとして利用できる



##Homebrewのインストール
ターミナルで```brew -v```コマンドを実行し、Homebrewがインストール済みであるか確認。
以下のように表示されている場合はインストール済みなので次工程へGo。

```:ターミナル
$ brew -v
Homebrew 2.4.2
```

インストールされていない場合は<a href="https://brew.sh/index_ja.html">Homebrew公式サイト<a/>からインストールのコードをコピーし、ターミナルで実行する。
コマンドの実行が完了したら、再度```brew -v```コマンドを実行し、上記のように表示されるか確認する。

<details><summary>【追記】Homebrewのアップグレード方法</summary><div>
一応、Homebrewのアップデート方法を記述しておきます。 

```:ターミナル
$ brew upgrade
```

</div></details>

##Nodebrewのインストール
Laravel Mixはnode.jsを使用して環境構築を行う。


なので、まずはnode.jsのバージョン管理をしているNodebrewをインストールする。
(インストールのコマンドは<a href="https://github.com/hokaccha/nodebrew">Nodebrew公式GitHub</a>に記述がありますので一応貼っておきます。)


```:ターミナル
$ curl -L git.io/nodebrew | perl - setup
```
<details><summary>Node.jsとは... [＊2]</summary><div>

<ul>
<li>サーバで動くJavaScript</li>
<li>小さい計算が得意で速い</li>
<li>マイクロソフトやYahooが推奨している</li>
<li>リアルタイムWebの分野に強い</li>
<li>小規模で機動性の高いWebアプリで、リアルタイム性が求められるアプリに最適</li>
</ul>

</div></details>

<details><summary>curlコマンドとは... [＊3]</summary><div>
サーバから、もしくはサーバへデータ転送を行うコマンド。
FTP,SFTP,LDAP,TELNETなど多くのプロトコルに対応している。
</div></details>

##Nodebrewへのパスを通す
Nodebrewをインストールすると下記のように出力される。

```:ターミナル
$ curl -L git.io/nodebrew | perl - setup
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
  0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
  0     0    0     0    0     0      0      0 --:--:--  0:00:01 --:--:--     0
  0     0    0     0    0     0      0      0 --:--:--  0:00:03 --:--:--     0
100 23758  100 23758    0     0   6965      0  0:00:03  0:00:03 --:--:--  6965
Fetching nodebrew...
Installed nodebrew in $HOME/.nodebrew

========================================
Export a path to nodebrew:

export PATH=$HOME/.nodebrew/current/bin:$PATH         【←ココ】
========================================
```

一番下の行の記述をそのままターミナルで実行し、Nodebrewのパスを通す。

```:ターミナル
$ export PATH=$HOME/.nodebrew/current/bin:$PATH
```

**【注意】**
一度ターミナルを閉じたりした場合は、もう一度パスを通す必要があるので注意。

<details><summary>パスを通すとは... [＊4]</summary><div>
パスとは「道」のことで、パスを通すとは、ある特定のフォルダまでの道をのりを用意してあげること。
そうすることで、コマンドを実行する際に全てのパスを記述する手間が省ける。
</div></details>

##Nodebrewのセットアップ

```:ターミナル
$ nodebrew setup
```

##Node.jsのインストール

```:ターミナル
$ nodebrew install-binary <version>
 
// <version>にはインストールしたいバージョンを記述
```

【注意】 ```nodebrew install <version>```でもインストール可能だが、インストール時間が長すぎるので、上記コマンドを使用してnode.jsをインストール。

<details><summary>【追記】Nodebrewのインストールコマンド豆知識</summary><div>
Nodebrewインストールコマンドの番外編として2つほど紹介。

```:ターミナル
//最新バージョンのNodebrewをインストール

$ nodebrew install-binary latest
```

```:ターミナル
//安定版で最新バージョンのNodebrewをインストール

$ nodebrew install-binary stable
```


stableでのインストールが無難かな。

</div></details>

##Node.jsを有効にする
インストールしたnode.jsを有効にするために、下記コマンドを実行。

```:ターミナル
$ nodebrew use <version>
```

インストール後に```nodebrew use```コマンドで有効にする必要がある。

<details><summary>【追記】```nodebrew lsコマンドについて```</summary><div>
```nodebrew ls```コマンドを実行すると、下記のように既にインストール済みであるバージョンと、有効(use)となっているバージョンの確認が可能。

```:ターミナル
$ nodebrew ls
v8.9.4
v12.16.1

current: v8.9.4
```

ちなみにどのバージョンも有効(use)にしていない場合は,```current: none```と表示される。
</div></details>

##Laravel Mixをインストール

```:ターミナル
$ npm install
```



Laravel Mixの実行方法については<a href="https://readouble.com/laravel/5.6/ja/mix.html?header=%25E3%2583%2590%25E3%2583%25BC%25E3%2582%25B8%25E3%2583%25A7%25E3%2583%25B3%25E4%25BB%2598%25E3%2581%2591%25EF%25BC%258F%25E3%2582%25AD%25E3%2583%25A3%25E3%2583%2583%25E3%2582%25B7%25E3%2583%25A5%25E5%25AF%25BE%25E7%25AD%2596">【公式】Laravel Mix解説</a>を参考に

<br>
以上になります。
間違い等ございましたら、是非ご指摘いただけたらと思います！


##参考記事

><a href="https://qiita.com/minato-naka/items/bfc3bbd9a388084e6f17">[＊1]Laravel Mixとは？webpackをより便利に、簡単に。Laravel以外でも使えるよ。</a>
><a href="https://qiita.com/miriwo/items/402c8a4b892a1005633a">[＊2]Node.jsとは？</a>
><a href="https://qiita.com/non_cal/items/a8fee0b7ad96e67713eb">Node.jsとはなにかなぜみんな使っているのか？</a>
><a href="https://qiita.com/ryuichi1208/items/e4e1b27ff7d54a66dcd9">[＊3]よく使うcurlコマンドのオプション</a>
><a href="https://qiita.com/Yohei_Shiina/items/81b80a8562bbd784ea82">[＊4]コマンドとは　PATH（パス）を通すとは</a>