本站的主題是商業,創業,美食,葡萄酒,閱讀,網路科技。
這是我的 FB粉專 以及 IG,我比較常使用 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.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
,在其中 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.
本站的主題是商業,創業,美食,葡萄酒,閱讀,網路科技。