使用 Laravel Mix 編譯 JavaScript 和 CSS

zhangbao發表於2017-07-02
Laravel編譯JavaScriptCSS

Laravel Mix 是從 Laravel 5.4 起提供的 JavaScript 和 CSS 編譯工具，之前是用 Laravel Elixir。區別是，前者是基於 Webpack，後者是基於 Gulp。

在我們使用 php artisan make:auth 命令生成的 app.blade.php 檔案中，可以看到

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

這是引用了 public 目錄下的兩個檔案：css/app.css 和 js/app.js。它們可以看做就是用 Laravel Mix 編譯後的輸出檔案。

Laravel Mix 的編譯規則在專案根目錄下的 webpack.mix.js 檔案中設定。

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

很明顯，Laravel Mix 最終將 resources/assets/js/app.js 檔案處理到 public/js 資料夾下的 app.js（未指定輸出檔名時，就保持和原始檔名一樣），將 resources/assets/sass/app.scss 檔案處理成 public/css 資料夾下的 app.css（輸出檔名和原始檔名一樣）。

如果你修改或間接修改了 resources/assets/js/app.js 和 resources/assets/sass/app.scss 檔案，並且想讓改動最終在專案中生效，就需要重新用 Laravel Mix 編譯了。命令如下：

$ npm run dev

// 或者

$ npm run production

npm run dev 適用於開發環境，最終輸出的程式碼不會被壓縮；npm run production 適用於生產環境，最終輸出的程式碼會被壓縮。

那麼壓縮何不壓縮到底有什麼區別呢？

剛才我用這兩條命令分別試了一下，物件就是一個空的 Laravel 5.4 專案。結果如下：

// 使用 npm run dev
/js/app.js   1.19 MB
/css/app.css    681 kB

// 使用 npm run production
/js/app.js    291 kB            
/css/app.css    114 kB
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章