# 编译资源 (Mix) - [简介](#introduction) - [安装 & 设置](#installation) - [运行 Mix](#running-mix) - [使用样式表](#working-with-stylesheets) - [Less](#less) - [Sass](#sass) - [Stylus](#stylus) - [PostCSS](#postcss) - [Plain CSS](#plain-css) - [URL 处理](#url-processing) - [资源映射](#css-source-maps) - [使用 JavaScript](#working-with-scripts) - [Vendor 提取](#vendor-extraction) - [React](#react) - [Vanilla JS](#vanilla-js) - [自定义 Webpack 配置](#custom-webpack-configuration) - [复制文件 & 目录](#copying-files-and-directories) - [版本控制 / 缓存清除](#versioning-and-cache-busting) - [Browsersync 重新加载](#browsersync-reloading) - [环境变量](#environment-variables) - [通知](#notifications) ## 简介 [Laravel Mix](https://github.com/JeffreyWay/laravel-mix) 提供了定义 Webpack 构建步骤的 API,用于在应用中使用常见的 CSS 和 JavaScript 预处理器。通过链式调用这些简洁方法,可以流畅地定义资源管道。例如: 如果对如何开始使用 Webpack 和资源编译感到困惑和不知所措,那么你一定会喜欢 Laravel Mix。但是,你不一定非要使用它来开发应用;可以使用你喜欢的任何资源管道工具,甚至干脆不用。 ## 安装 & 设置 #### 安装 Node 在触发 Mix 之前,要先确保机器上已经安装了 Node.js 和 NPM。 node -v npm -v 默认情况下, Laravel Homestead 包含了你需要的所有东西;不过如果你使用 Vagrant,你也能使用从 [它们的下载页面](https://nodejs.org/en/download/) 获取的更易用的图形化安装器安装最新版本的 Node 和 NPM。 #### Laravel Mix 剩下的事儿就是安装 Laravel Mix。在 Laravel 的纯净安装版中,可以在目录结构的根目录中找到 `package.json` 文件。默认的 `package.json` 文件包含了起步所需的所有东西,把它想像成 `composer.json` 文件,只不过它是定义 Node 的依赖项,而不是 PHP 的。通过运行如下命令来安装它引用的依赖: npm install ## 运行 Mix Mix 是 [Webpack](https://webpack.js.org) 的顶层配置,因此运行 Mix 任务,只需要执行一条包含在 Laravel 默认的 `package.json` 文件中的脚本: // 运行 Mix 任务... npm run dev // 运行所有的 Mix 任务并最小化输出结果... npm run production #### 监听资源变化 `npm run watch` 命令能够在终端持续运行并且监听相关文件的变化。一旦它发现改变,Webpack 将自动重新编译资源: npm run watch 你会发现在特定环境下,文件发生改变并不会促使 Webpack 更新。如果系统中出现这种情况,不妨考虑使用 `watch-poll` 命令: npm run watch-poll ## 使用样式表 `webpack.mix.js` 文件所有资源编译的切入点。把它想像为 Webpack 的轻量级配置封装。Mix 任务可以与如何编译资源的配置一起被链式调用。 ### Less `less` 方法可用于将 [Less](http://lesscss.org/) 编译成 CSS。下面的语句将 `app.less` 文件编译为 `public/css/app.css`: mix.less('resources/less/app.less', 'public/css'); 可以通过多次调用 `less` 方法完成多文件编译: mix.less('resources/less/app.less', 'public/css') .less('resources/less/admin.less', 'public/css'); 如果希望自定义编译后的 CSS 文件名,可以把完整的文件路径作为传递给 `less` 方法的第二个参数: mix.less('resources/less/app.less', 'public/stylesheets/styles.css'); 如果需要覆盖 [隐含的 Less 插件选项](https://github.com/webpack-contrib/less-loader#options) ,可以传递一个对象作为 `mix.less()` 的第三个参数: mix.less('resources/less/app.less', 'public/css', { strictMath: true }); ### Sass `sass` 方法能将 [Sass](https://sass-lang.com/) 编译成 CSS。可以像下面这样使用这个方法: mix.sass('resources/sass/app.scss', 'public/css'); 和 `less` 方法类似,可以将多个 Sass 文件编译为各自的 CSS 文件,并为结果 CSS 自定义输出目录: mix.sass('resources/sass/app.sass', 'public/css') .sass('resources/sass/admin.sass', 'public/css/admin'); 额外的 [Node-Sass 插件选项](https://github.com/sass/node-sass#options) 可以作为第三个参数: mix.sass('resources/sass/app.sass', 'public/css', { precision: 5 }); ### Stylus 与 Less 和 Sass 相似, `stylus` 方法将 [Stylus](http://stylus-lang.com/) 编译成 CSS: mix.stylus('resources/stylus/app.styl', 'public/css'); 还可以安装额外的 Stylus 插件,比如 [Rupture](https://github.com/jescalan/rupture) 。先通过 NPM (`npm install rupture`)安装有插件,然后在调用 `mix.stylus()` 时包含它: mix.stylus('resources/stylus/app.styl', 'public/css', { use: [ require('rupture')() ] }); ### PostCSS [PostCSS](https://postcss.org/) 是一个转换 CSS 的强力工具,它已经包含在 Laravel Mix 中。默认情况下,Mix 利用流行的 [Autoprefixer](https://github.com/postcss/autoprefixer) 插件自动附加所有必要的 CSS3 第三方前缀。不过,你可以自由添加应用中所需的任何附加插件。首先通过 NPM 安装所需插件,然后在 `webpack.mix.js` 文件引用: mix.sass('resources/sass/app.scss', 'public/css') .options({ postCss: [ require('postcss-css-variables')() ] }); ### 原生 CSS 如果想要将几个原生 CSS 样式表合并到单个文件中,可以使用 `styles` 方法。 mix.styles([ 'public/css/vendor/normalize.css', 'public/css/vendor/videojs.css' ], 'public/css/all.css'); ### URL 处理 因为是基于 Webpack 之上构建,了解几个 Webpack 概念就很重要了。对于 CSS 编译,Webpack 将重写和优化任何带有样式表的 `url()` 调用。虽然初听上去好像很奇怪,但这确实是个强大的功能。 想像一下我们想要编译包含图片相对 URL 的 Sass: .example { background: url('../images/example.png'); } > {note} 任何给定 `url()` 的绝对路径将被排除在 URL 重写之外。例如 `url('/images/thing.png')` 或 `url('http://example.com/images/thing.png')` 将不会被修改。 默认情况下,Laravel Mix 和 Webpack 将找到 `example.png`, 将其复制到 `public/images` 文件夹,然后重写生成的样式表中的 `url()`。如此一平,编译后的 CSS 将变成: .example { background: url(/images/example.png?d41d8cd98f00b204e9800998ecf8427e); } 尽管此功能可能很有用,但是已有文件夹结构可能已经按你的预期做了配置。这种情况下,你可以禁用 `url()` 重写: mix.sass('resources/app/app.scss', 'public/css') .options({ processCssUrls: false }); 在 `webpack.mix.js` 文件中加入这项配置,Mix 将不再匹配任何 `url()` 或者复制资源到 public 目录。换句话说,编译后的 CSS 看上去和你原来输入的内容一样: .example { background: url("../images/thing.png"); } ### 源码映射 虽然默认情况下源码映射被禁用,但是可以通过在 `webpack.mix.js` 文件中调用 `mix.sourceMaps()` 方法来激活。尽管会提高编译/执行的成本,却可以在在编译资源时为浏览器开发工具提供额外的调试信息。 mix.js('resources/js/app.js', 'public/js') .sourceMaps(); ## 使用 JavaScript Mix 提供了几个有助于使用 JavaScript 文件的特性,比如编译 ECMAScript 2015、模块打包、最小化和合并原生 JavaScript 文件。更棒的是,所有这些都无需配置就可以很好地工作。 mix.js('resources/js/app.js', 'public/js'); 只需这一行代码,就可以支持: