Laravel Mix
Laravel PHP

Laravel Mix

圖片來源 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.scss” 到 “public/css/app.css”,”resources/assets/js/app.js” 到 “public/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, 在 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') }}">

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

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。