Laravel Mix
Laravel 前端工程

Laravel Mix

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

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

FB粉專會頻繁地分享以上主題,我最近也滿常使用Threads,歡迎大家追蹤互動~

圖片來源 https://github.com/JeffreyWay/laravel-mix

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/assets/sass/app.scsspublic/css/app.css
  • resources/assets/js/app.jspublic/js/app.js

注意 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粉專會頻繁地分享以上主題,我最近也滿常使用Threads,歡迎大家追蹤互動~