1
1

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 3 years have passed since last update.

Laravel Mixのインストール

Last updated at Posted at 2020-10-17

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

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

ターミナル
$ brew -v
Homebrew 2.4.2

インストールされていない場合はHomebrew公式サイトからインストールのコードをコピーし、ターミナルで実行する。
コマンドの実行が完了したら、再度brew -vコマンドを実行し、上記のように表示されるか確認する。

【追記】Homebrewのアップグレード方法
一応、Homebrewのアップデート方法を記述しておきます。
ターミナル
$ brew upgrade

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

なので、まずはnode.jsのバージョン管理をしているNodebrewをインストールする。
(インストールのコマンドはNodebrew公式GitHubに記述がありますので一応貼っておきます。)

ターミナル
$ curl -L git.io/nodebrew | perl - setup
Node.jsとは... [*2]
  • サーバで動くJavaScript
  • 小さい計算が得意で速い
  • マイクロソフトやYahooが推奨している
  • リアルタイムWebの分野に強い
  • 小規模で機動性の高いWebアプリで、リアルタイム性が求められるアプリに最適
curlコマンドとは... [*3]
サーバから、もしくはサーバへデータ転送を行うコマンド。 FTP,SFTP,LDAP,TELNETなど多くのプロトコルに対応している。

##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

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

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

##Nodebrewのセットアップ

ターミナル
$ nodebrew setup

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

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

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

【追記】Nodebrewのインストールコマンド豆知識
Nodebrewインストールコマンドの番外編として2つほど紹介。
ターミナル
//最新バージョンのNodebrewをインストール

$ nodebrew install-binary latest
ターミナル
//安定版で最新バージョンのNodebrewをインストール

$ nodebrew install-binary stable

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

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

ターミナル
$ nodebrew use <version>

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

【追記】```nodebrew lsコマンドについて```
```nodebrew ls```コマンドを実行すると、下記のように既にインストール済みであるバージョンと、有効(use)となっているバージョンの確認が可能。
ターミナル
$ nodebrew ls
v8.9.4
v12.16.1

current: v8.9.4

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

##Laravel Mixをインストール

ターミナル
$ npm install

Laravel Mixの実行方法については【公式】Laravel Mix解説を参考に


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

##参考記事

[*1]Laravel Mixとは?webpackをより便利に、簡単に。Laravel以外でも使えるよ。
[*2]Node.jsとは?
Node.jsとはなにかなぜみんな使っているのか?
[*3]よく使うcurlコマンドのオプション
[*4]コマンドとは PATH(パス)を通すとは

1
1
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
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?