编译资源（Laravel Mix）

1、简介

Laravel Mix 提供了一套流式 API，使用一些通用的 CSS 和 JavaScript 预处理器为 Laravel 应用定义 Webpack 构建步骤。通过简单的方法链，你可以流式定义资源管道。例如：

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

如果你对如何开始使用 Webpack 和前端资源编译感到困惑，那么你会爱上 Laravel Mix。不过，并不是强制要求在开发期间使用它。你可以自由选择使用任何前端资源管道工具，或者压根不使用。

2、安装 & 设置

安装 Node

在开始接触 Mix 之前，必须首先确保 Node.js 和 NPM 在机器上已经安装：

node -v
npm -v

默认情况下，Laravel Homestead 已经包含了你所需要的一切；不过，如果你没有使用 Vagrant，你也可以从Node 的下载页面轻松的下载安装 Node。

Laravel Mix

接下来，需要安装 Laravel Mix，在新安装的 Laravel 根目录下，你会发现有一个 package.json 文件。该文件包含你所需要的一切，和 composer.json 类似，只不过是用来定义 Node 依赖而非 PHP 依赖，你可以通过运行如下命令来安装需要的依赖：

npm install

如果你正在 Windows 系统上开发，需要在运行 npm install 命令时带上 --no-bin-links：

npm install --no-bin-links

3、运行 Mix

Mix 是位于 Webpack 顶层的配置层，所以要运行 Mix 任务你只需要在运行包含在默认 package.json 文件中的其中某个 NPM 脚本即可：

// 运行所有 Mix 任务...
npm run dev

// 运行所有 Mix 任务并减少输出...
npm run production

监控前端资源改变

npm run watch 命令将会持续在终端运行并监听所有相关文件的修改，Webpack将会在发现修改后自动重新编译资源文件：

npm run watch

4、处理样式表

webpack.mix.js 是所有资源编译的入口，可以将其看作 Webpack 的轻量级配置封装层。Mix 任务可以以方法链的方式被链在一起来定义前端资源如何被编译。

Less

要将 Less 编译成 CSS，可以使用 less 方法。下面让我们来编译 app.less 文件到 public/css/app.css：

mix.less('resources/assets/less/app.less', 'public/css');

多次调用 less 方法可用于编译多个文件：

mix.less('resources/assets/less/app.less', 'public/css')
   .less('resources/assets/less/admin.less', 'public/css');

如果你想要自定义编译后文件的输出位置，可以将完整的路径信息作为第二个参数传递到 less 方法：

mix.less('resources/assets/less/app.less', 'public/stylesheets/styles.css');

Sass

sass 方法允许你将 Sass 编译成 CSS。你可以像这样使用该方法：

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

同样，和 less 方法一样，你可以将多个 Sass 文件编译成单个 CSS 文件，甚至自定义结果 CSS 的输出路径：

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

原生CSS

如果你只想要将多个原生 CSS 样式文件合并到一个文件，可以使用 combine 方法。该方法还支持连接 JavaScript 文件：

mix.combine([
    'public/css/vendor/normalize.css',
    'public/css/vendor/videojs.css'
], 'public/css/all.css');

Source Map

虽然 Source Map 默认被禁用，但是可以通过在 webpack.mix.js 文件中调用 mix.sourceMaps() 来激活。尽管这会带来编译/性能开销，不过在编译资源的时候可以提供额外的调试信息给浏览器的开发者工具：

mix.js('resources/assets/js/app.js', 'public/js')
   .sourceMaps();

5、处理脚本

Mix 还提供了多个特性帮助你处理 JavaScript 文件，例如编译 ECMAScript 2015，模块捆绑，最小化以及合并原生 JavaScript 文件。更好的是，这些都是无缝集成的，不需要额外的自定义配置：

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

通过这一行代码，你可以实现如下功能：

• ES2015 语法
• 编译 .vue 文件
• 最小化生产环境

代码拆分

捆绑所有应用特定JavaScript和vendor库的一个潜在缺点是进行长期缓存将变得更加困难，例如，单个更新应用代码将会强制浏览器下载所有vendor库，即使它们并没有更新。

如果你想要频繁更新应用的JavaScript，需要考虑对vendor库进行提取和拆分，这样的话，一次修改应用代码不会影响 vendor.js 文件的缓存。Mix 的 extract 方法可以实现这样的功能：

mix.js('resources/assets/js/app.js', 'public/js')
   .extract(['vue'])

extract 方法接收包含所有库的数组或你想要提取到vendor.js文件的模块，使用上述代码作为示例，Mix将会生成如下文件：

• public/js/manifest.js：Webpack manifest runtime
• public/js/vendor.js：vendor 库
• public/js/app.js：应用代码

<script src="/js/manifest.js"></script>
<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>

自定义 Webpack 配置

在场景背后，Laravel Mix 引用了预配置的 webpack.config.js 文件来尽可能快的启动和运行。个别情况下，你需要手动编辑这个文件。你可能有一个被引用的特定的加载器或插件，或者可能倾向于使用 Stylus 而不是 Sass，在这些情况下，你有两个选择：

合并

Mix 提供了一个有用的 webpackConfig 方法，从而允许你合并任意简短的 Webpack 配置覆盖。这是一个很吸引人的选择，因为不需要你拷贝或维护自己的webpack.config.js文件副本，webpackConfig方法接收一个对象，该对象包含了任意你想要应用的Webpack指定配置：

mix.webpackConfig({
    resolve: {
        modules: [
            path.resolve(__dirname, 'vendor/laravel/spark/resources/assets/js')
        ]
    }
});

引用自己的配置

第二个选择是拷贝Mix的webpack.config.js到自己的项目根目录：

cp node_modules/laravel-mix/setup/webpack.config.js ./

接下来，需要更新 package.json 中的 NPM 脚本，以确保它们不再直接引用 Mix 的配置文件。只需从命令中移除--config="node_modules/laravel-mix/setup/webpack.config.js"即可。完成之后，需要按照需要编辑自己的配置文件。

6、拷贝文件/目录

你可以使用 copy 方法拷贝文件/目录到新路径，这在将node_modules目录下的特定资源文件重新放置到public目录下时很有用：

mix.copy('node_modules/foo/bar.css', 'public/css/bar.css');

7、版本号/缓存刷新

很多开发者会给编译的前端资源添加时间戳或者唯一令牌后缀以强制浏览器加载最新版本而不是代码的缓存副本。Mix 可以使用 version 方法为你处理这种情况。

version 方法会自动附加唯一hash到已编译文件名，从而方便实现缓存刷新：

mix.js('resources/assets/js/app.js', 'public/js')
   .version();

生成版本文件后，还不知提取的文件名，所以，你需要在视图中使用 Laravel 全局的 mix 函数来加载相应的带 hash 值的前端资源。mix 函数会自动判当前的 hash 文件名：

<link rel="stylesheet" href="{{ mix('css/app.css') }}">

由于版本文件在本地开发中没有什么用，你可以只在运行npm run production期间进行版本处理操作：

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

if (mix.config.inProduction) {
    mix.version();
}

8、通知

在有效的情况下，Mix 会自动为每个捆绑显示操作系统通知，这可以给你一个及时的反馈：编译成功还是失败。不过，某些场景下你可能希望禁止这些通知，一个例子就是在生成环境服务器触发Mix。通知可以通过disableNotifications方法被停用：

mix.disableNotifications();