使用 Laravel Mix 编译 JavaScript 和 CSS

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 协议》，转载必须注明作者和本文链接