You are here
Laravel 5.3 中文文档」JavaScript & CSS – 编译资源（Laravel Elixir）
简介
Laravel Elixir 为 Laravel 应用提供了一个简洁、流畅的 API 来定义基本的 Gulp 任务。Elixir 支持普通的 JavaScript 和 CSS 预处理器，如 SASS 和 Webpack。通过链式方法，Elixir 允许你流畅的定义你的资源管道。例如：
elixir(function(mix) {
mix.sass('app.scss')
.webpack('app.js');
});
如果你对开始使用 Gulp 和资源编译感到困惑，你会爱上 Laravel Elixir。然而，开发应用时你并不是必须使用它。你可以使用任意的资源管道工具，甚至是不使用。
安装 & 设置
安装 Node
在触发 Elixir 前，你必须确保你的机器安装了 Node.js 和 NPM：
node -v
npm -v
默认情况下，Laravel Homestead 包含了你需要的所有东西；然而，如果你不使用 Vagrant，那么你可以在它们的下载页面使用简单的图形安装器来安装最新版本的 Node 和 NPM。
Gulp
之后，你需要安装 Gulp 作为一个全局的 NPM 包：
npm install --global gulp-cli
Laravel Elixir
最后剩下的步骤是安装 Laravel Elixir。在全新安装的 Laravel 中，你可以在根目录中看到一个 package.json 文件。默认的 package.json 包含了 Elixir 和 Webpack JavaScript 模块打包器。你会发现它同 composer.json 文件很像，除了它是定义 Node 依赖而非 PHP 依赖。你可以通过运行下面的命令来安装依赖：
npm install
如果你在 Windows 系统开发或者你在 Windows 系统中使用 VM，你需要在运行 npm install 命令时带上 --no-bin-links 选项：
npm install --no-bin-links
运行 Elixir
Elixir 是通过 Gulp 构建的，所以，要运行 Elixir 任务，你只需在命令行运行 gulp 命令。为命令添加 --production 标签会委托 Elixir 压缩你的 JavaScript 和 CSS 文件：
// 运行所有任务
gulp
// 运行所有任务并压缩 CSS 和 JavaScript 文件
gulp --production
在运行此命令时，你可以看到一个格式化的表格，展示刚刚发生的事件的摘要。
监控资源变化
gulp watch 命令会持续在命令行运行，并监控资源的任何变化。在运行 watch 命令时，Gulp 会在你更新资源时重新编译它们：
gulp watch
处理样式表
项目根目录下的 gulpfile.js 文件包含了所有的 Elixir 任务。Elixir 任务可以链式调用来定义你的资源如何编译。
Less
less 方法可以用来编译 Less 为 CSS，less 方法假定你的 Less 文件存放在 resources/assets/less 目录。默认情况下，任务会把这个例子编译的 CSS 放到 public/css/app.css：
elixir(function(mix) {
mix.less('app.less');
});
你也可以把多个 Less 文件编译为一个 CSS 文件。再次强调，结果 CSS 会放置到 public/css/app.css：
elixir(function(mix) {
mix.less([
'app.less',
'controllers.less'
]);
});
如果你想自定义编译后的 CSS 的存放路径，你可以为 less 传递第二个参数：
elixir(function(mix) {
mix.less('app.less', 'public/stylesheets');
});
// Specifying a specific output filename...
elixir(function(mix) {
mix.less('app.less', 'public/stylesheets/style.css');
});
Sass
sass 方法会编译 Sass 为 CSS。假定你的 Sass 存放在 resources/assets/sass，你可以使用下面的方法：
elixir(function(mix) {
mix.sass('app.scss');
});
再次强调，类似 less 方法，你可以编译多个 Sass 文件为单个 CSS 文件，甚至自定义结果 CSS 的输出目录：
elixir(function(mix) {
mix.sass([
'app.scss',
'controllers.scss'
], 'public/assets/css');
});
自定义路径
虽然建议你使用 Laravel 默认的资源目录，如果你想使用一个不同的基础路径，你可以在任意路径前加上 ./ 。这表明 Elixir 将会从项目根目录开始寻找文件，而不是使用默认的基础目录。
例如，要编译位于 app/assets/sass/app.scss 的文件，并把结果输出到 public/css/app.css。你可以这样调用 sass 方法：
elixir(function(mix) {
mix.sass('./app/assets/sass/app.scss');
});
Stylus
stylus 方法可以用来编译 Stylus 为 CSS。假定你的 Stylus 文件存放在 resources/assets/stylus，你可以这样调用：
elixir(function(mix) {
mix.stylus('app.styl');
});
这个方法的签名同 mix.less() 和 mix.sass() 一样。
原生 CSS
如果你想编译一些原生的 CSS 样式表为单个文件，你可以使用 styles 方法。传递给这个方法的路径是相对于 resources/assets/css 目录，并且结果 CSS 放置在 public/css/all.css ：
elixir(function(mix) {
mix.styles([
'normalize.css',
'main.css'
]);
});
你还可以通过给 styles 方法传递第二个参数来指导 Elixir 输出结果到一个自定义目录或文件：
elixir(function(mix) {
mix.styles([
'normalize.css',
'main.css'
], 'public/assets/css/site.css');
});
匹配源
在 Elixir 中，匹配源是默认开启的，并且当编译资源时为你浏览器的开发者工具提供了更好的调试信息。当相关的文件编译后，你会在相同的文件夹下发现 *.css.map 或 *.js.map 文件。
如果你不想为应用生成匹配源，你可以通过 sourcemaps 配置项禁用它们：
elixir.config.sourcemaps = false;
elixir(function(mix) {
mix.sass('app.scss');
});
操作脚本
Elixir 提供了一些功能来帮助你处理 JavaScript 文件，例如编译 ECMAScript 2015、模块绑定、压缩、以及连接原生 JavaScript 文件。
当编写 ES2015 模块时，你可以选择 Webpack 或 Rollup，如果你对这些工具陌生，别急，Elixir 会为你处理这些复杂的逻辑。默认情况下，Laravel 的 gulpfile 使用 webpack 来编译 JavaScript，但是你也可以自由的使用你喜欢的模块打包器。
Webpack
webpack 方法可以用来编译和打包 ECMAScript 2015 为原生 JavaScript，这个函数接收一个相对于 resources/assets/js 文件夹的相对路径，并生成一个单个的打包文件到 public/js 目录：
elixir(function(mix) {
mix.webpack('app.js');
});
要选择一个不同的输出或基础路径，只需在你期望的路径前加上 . 符号，然后你可以指定相对于应用根目录的相对路径。例如，要编译 app/assets/js/app.js 为 public/dist/app.js：
elixir(function(mix) {
mix.webpack(
'./resources/assets/js/app.js',
'./public/dist'
);
});
如果你想利用更多 Webpack 的功能，Elixir 会读取任何位于根目录的 webpack.config.js 文件，并把它的配置用于构建过程。
Rollup
同 Webpack 相似，Rollup 也是 ES2015 的下一代打包器。这个函数接收一个相对于 resources/assets/js 目录的文件数组，并生成一个单个的文件到 public/js 目录：
elixir(function(mix) {
mix.rollup('app.js');
});
同 webpack 方法相同，你可以自定义 rollup 函数输入文件及输出文件的位置：
elixir(function(mix) {
mix.rollup(
'./resources/assets/js/app.js',
'./public/dist'
);
});
脚本
如果你有多个 JavaScript 文件并想把它们编译为单个文件，你可以使用 scripts 方法，这个函数提供了自动匹配源、连接、及压缩。
scripts 方法假定所有的路径是相对于 resources/assets/js 目录，并默认把结果 JavaScript 放置到 public/js/all.js：
elixir(function(mix) {
mix.scripts([
'order.js',
'forum.js'
]);
});
如果你想连接多个脚本集到多个文件，你可以多次调用 scripts 方法。传递给其的第二个参数用来指明每个连接的结果文件的名称：
elixir(function(mix) {
mix.scripts(['app.js', 'controllers.js'], 'public/js/app.js')
.scripts(['forum.js', 'threads.js'], 'public/js/forum.js');
});
如果你想编译一个目录下的所有脚本，你可以使用 scriptsIn 方法。结果 JavaScript 会放置到 public/js/all.js ：
elixir(function(mix) {
mix.scriptsIn('public/js/some/directory');
});
如果你打算连接多个预压缩的 vendor 库，例如 jQuery，可以考虑使用 mix.combine() 方法。这会编译那些文件，并忽略匹配源和压缩步骤，并且编译时间会大幅提升。
拷贝文件 & 目录
copy 方法可以拷贝文件或目录到一个新的位置。所有的操作都相对于项目的根目录：
elixir(function(mix) {
mix.copy('vendor/foo/bar.css', 'public/css/bar.css');
});
版本号 / 缓存销毁
多个开发者会使用时间戳或唯一令牌作为编译资源的后缀，强制浏览器加载新的资源而非废弃的代码的拷贝。Elixir 会使用 version 方法为你处理这些。
version 方法接收一个相对于 public 目录的文件名，并附加一个唯一哈希到文件名，用于销毁缓存。例如，生成的文件名看起来类似 all-16d570a7.css：
elixir(function(mix) {
mix.version('css/all.css');
});
生成带版本号的文件后，你可以在视图中使用 Laravel 的全局辅助 elixir 方法来加载适当的哈希的资源。elixir 方法会自动声明当前名称为哈希文件：
<link rel="stylesheet" href="{{ elixir('css/all.css') }}">
多个文件设置版本号
你可以给 version 传递一个数组来为多个文件加上版本号：
elixir(function(mix) {
mix.version(['css/all.css', 'js/app.js']);
});
当文件加上版本号后，你可以使用 elixir 辅助方法生成合适的哈希文件的链接。记住，你只需给 elixir 辅助方法传递一个未哈希的文件的名字。这个辅助方法会使用未哈希的文件名指明当前文件的哈希版本：
<link rel="stylesheet" href="{{ elixir('css/all.css') }}">
<script src="{{ elixir('js/app.js') }}"></script>
浏览器同步
浏览器同步会在你更改资源后自动刷新浏览器。browserSync 方法接收一个 JavaScript 对象，它有一个包含应用本地 URL 的 proxy 属性。之后，一旦你运行 gulp watch 你就可以使用 3000 端口访问 WEB 应用（http://project.dev:3000）来享受浏览器同步：
elixir(function(mix) {
mix.browserSync({
proxy: 'project.dev'
});
});
该篇属于专题:《Laravel 5.3 中文文档》