Laravel Mix(Webpack)を導入しsassやJavaScriptをコンパイル/minifyする

# node.jsの導入確認
node -v

# 実行結果
[demo@localhost ~]# node -v
-bash: node: command not found

# NPMの導入確認
npm -v

# 実行結果
[demo@localhost ~]# npm -v
-bash: npm: command not found

# インストールできるnode.jsの確認
yum list nodejs

# 実行結果
[root@localhost ~]# yum list nodejs                                                                                                                                  
Loaded plugins: fastestmirror
Loading mirror speeds from cached hostfile
 * base: download.nus.edu.sg
 * epel: mirrors.ustc.edu.cn
 * extras: ftp.tsukuba.wide.ad.jp
 * remi-safe: mirrors.mediatemple.net
 * updates: ftp.tsukuba.wide.ad.jp
Available Packages
nodejs.x86_64            1:6.11.3-1.el7            epel

# node.jsの8系をリポジトリに追加
curl -sL https://rpm.nodesource.com/setup_8.x | bash -

# 実行結果
[root@localhost ~]# curl -sL https://rpm.nodesource.com/setup_8.x | bash -

## Installing the NodeSource Node.js 8.x repo...


## Inspecting system...

+ rpm -q --whatprovides redhat-release || rpm -q --whatprovides centos-release || rpm -q --whatprovides cloudlinux-release || rpm -q --whatprovides sl-release
+ uname -m

## Confirming "el7-x86_64" is supported...

+ curl -sLf -o /dev/null 'https://rpm.nodesource.com/pub_8.x/el/7/x86_64/nodesource-release-el7-1.noarch.rpm'

## Downloading release setup RPM...

+ mktemp
+ curl -sL -o '/tmp/tmp.JCXfssSPqQ' 'https://rpm.nodesource.com/pub_8.x/el/7/x86_64/nodesource-release-el7-1.noarch.rpm'

## Installing release setup RPM...

+ rpm -i --nosignature --force '/tmp/tmp.JCXfssSPqQ'

## Cleaning up...

+ rm -f '/tmp/tmp.JCXfssSPqQ'

## Checking for existing installations...

+ rpm -qa 'node|npm' | grep -v nodesource

## Run `yum install -y nodejs` (as root) to install Node.js 8.x and npm.
## You may also need development tools to build native addons:
##   `yum install -y gcc-c++ make`

# 導入可能なnode.jsのバージョンを確認する
yum list nodejs

# 実行結果
[root@localhost ~]# yum list nodejs
Loaded plugins: fastestmirror
Loading mirror speeds from cached hostfile
 * base: ftp.tsukuba.wide.ad.jp
 * epel: ftp.riken.jp
 * extras: ftp.tsukuba.wide.ad.jp
 * remi-safe: mirror.innosol.asia
 * updates: ftp.tsukuba.wide.ad.jp
Available Packages
nodejs.x86_64         2:8.9.0-1nodesource         nodesource

# node.js NPM 開発ツール をインストールする
yum -y install nodejs gcc-c++ make

# node.jsのバージョンを確認する
node -v

# 実行結果
[root@localhost ~]# node -v
v8.9.0

# node.jsのバージョンを確認する
npm -v

# 実行結果
[root@localhost ~]# npm -v
5.5.1

# laravelルートディレクトリへ移動
cd /path/to/laravel

# 依存パッケージのインストール
npm install

# 仮想環境でエラーが出る場合は --no-bin-links オプションを付ける
npm install --no-bin-links

$background-color: #ffdab9;
$color: #000080;
$margin: 10px 20px 30px 40px;

body {
  background-color: $background-color;
}

p {
  color: $color;
}

.test-margin {
  margin: $margin;
}

.aaa {
  padding: 10px;
}

.bbb {
  .button {
    position: absolute;
    top: 0;
    padding: 10px 15px;
    cursor: pointer;
  }
  .button:hover {
    color: #f7ecb5;
  }
}

.ccc {
  display: block;
  text-indent: 30px;
  line-height: 30px;
  font-size: 12px;
  color: #999999;
  border: none;
}

function test(string, number) {
  var ret = '';
  ret = string + 'test';

  var num = '';
  num = number * 12;

  ret += ret + ' : ' + num;

  return ret;
}

window.onload = function() {
  test('ビルドのテスト', 24);
};

laravel
├─ resources
│   ├─ assets
│   │   ├─ build // ← ココ
│   │   ├─ js
│   │   │   ├─ test1.js // ← ココ
│   │   │   └─ test2.js // ← ココ
│   │   └─ sass
│   │   │   ├─ test1.scss // ← ココ
│   │   │   └─ test2.scss // ← ココ

let mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

let mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix
  // ビルドしたsassをそれぞれ開発側buildディレクトリへ出力
  .sass('resources/assets/sass/test1.scss', '../resources/assets/build/css/')
  .sass('resources/assets/sass/test2.scss', '../resources/assets/build/css/')
  // buildディレクトリに出力したcssファイルを、app.cssというファイルに１つにまとめてpublicディレクトリへ出力する
  .styles(
    [
      'resources/assets/build/css/test1.css',
      'resources/assets/build/css/test2.css'
    ],
    'public/css/app.css'
  )
  // app.jsというファイルに１つにまとめてpublicディレクトリへ出力する
  .js(
    [
      'resources/assets/js/test1.js',
      'resources/assets/js/test2.js'
    ],
    'public/js/app.js'
  );

# build
npm run dev

# build & minify
npm run production

# npm run dev でエラーになる場合は以下を叩いてグローバルインストールを行う
npm -g install cross-env cross-spawn

├─ public
│   ├─ css
│   │   └─ app.css // ← 公開ディレクトリへ出力されたcssファイル
│   ├─ js
│   │   └─ app.js // ← 公開ディレクトリへ出力されたjsファイル
│
├─ resources
│   ├─ assets
│   │   ├─ build
│   │   │   └─ css
│   │   │        ├─ test1.css // ← buildによって生成されたcssファイル
│   │   │        └─ test2.css // ← buildによって生成されたcssファイル
│   │   ├─ js
│   │   │   ├─ test1.js // ← 作成したjsファイル
│   │   │   └─ test2.js // ← 作成したjsファイル
│   │   └─ sass
│   │       ├─ test1.scss // ← 作成したsassファイル
│   │       ├─ test2.scss // ← 作成したsassファイル

body {
  background-color: #ffdab9;
}

p {
  color: #000080;
}

.test-margin {
  margin: 10px 20px 30px 40px;
}


.aaa {
  padding: 10px;
}

.bbb .button {
  position: absolute;
  top: 0;
  padding: 10px 15px;
  cursor: pointer;
}

.bbb .button:hover {
  color: #f7ecb5;
}

.ccc {
  display: block;
  text-indent: 30px;
  line-height: 30px;
  font-size: 12px;
  color: #999999;
  border: none;
}

body{background-color:#ffdab9}p{color:navy}.test-margin{margin:10px 20px 30px 40px}.aaa{padding:10px}.bbb .button{position:absolute;top:0;padding:10px 15px;cursor:pointer}.bbb .button:hover{color:#f7ecb5}.ccc{display:block;text-indent:30px;line-height:30px;font-size:12px;color:#999;border:none}