Laravel Mix

🏆 超過50萬名讀者已閱讀本站的內容，共同創造了85萬次總閱讀次數！

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.

本站的主題是商業、創業、美食、葡萄酒、科技、AI、財經投資

我的 Threads > 1.8k追蹤，FB粉專 > 1.7k追蹤，也歡迎加入我的 IG 觀看短影片~