Laravel Mix

商業，創業，業務，職涯，美食，葡萄酒，閱讀，網路科技。

從 Larry 創業以及商業的經驗，希望以白話的口吻，介紹給大家這個商業的世界。

FB粉專會頻繁地更新 Larry 對於商業、社會、人生的觀察與心得，歡迎大家追蹤互動~

https://laravel.com/docs/5.4/frontend
https://laravel.com/docs/5.4/mix
Laravel 5.4 開始使用 Laravel Mix 去處理前端的 js / css 檔案，Laravel Mix 這套件是由 npm 管理的，所以首先確認你的開發環境中有裝 npm.

裝完 Laravel 後你的 Laravel 根目錄會有 package.json, webpack.mix.js, 確認這兩支 file 也在你的開發環境，執行

npm install

或是 (如果你的開發環境是 Windows)

npm install --no-bin-links

npm 就會依照 package.json 去 download 套件到你的開發環境。注意 package.json 中預設就有 Bootstrap, jQuery, Laravel Mix, Vue. 執行

npm run dev

或是 (如果你要壓縮你的 js/css output)

npm run production

npm 就會去執行 webpack.mix.js 中所指定的步驟 (有 gulp 經驗的朋友應該不陌生)。 webpack.mix.js 預設會 compile

注意 resources folder 是外部不可 access 的，public folder 才是公開的。

如果你看一下 resources/assets/sass/app.scss 就會了解，他就是一般 Sass 的架構，預設就有個 _variables.scss 在隔壁，import 到 app.scss

resources/assets/js/app.js 中預設 import 隔壁的 bootstrap.js，在其中 load 了 jQuery, Bootstrap, Vue, 可以在其中作 configuration.

最後有點值得一提，在 webpack.mix.js 最後加上 version()

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

這樣產出的 app.css, app.js 檔案名稱都會被編碼過 (參考如何利用 gulp 自動添加 JS 及 CSS 版號，避免瀏覽器快取)。使用時

<link rel="stylesheet" href="{{ mix('/css/app.css') }}">
<script src="{{ mix('/js/app.js') }}"></script>

mix function 會自行去找最新產出的 css / js.

商業，創業，業務，職涯，美食，葡萄酒，閱讀，網路科技。

從 Larry 創業以及商業的經驗，希望以白話的口吻，介紹給大家這個商業的世界。

FB粉專會頻繁地更新 Larry 對於商業、社會、人生的觀察與心得，歡迎大家追蹤互動~