Laravel Elixir 深入探究（一）：Elixir配置选项、前端资源文件编译及合并
0、概述
前两节我们对Laravel Elixir进行了基本介绍和安装，以及如何使用Elixir将Bootstrap集成到项目中来，这一节开始我们在此基础上对Laravel Elixir进行更为系统的讲解，设计到Laravel Elixir配置及使用的方方面面，试图让大家对Laravel Elixir有一个全方位的认识。
当我们在开发应用的时候，有很多重复性的任务需要处理，这些任务包括：
- 编写JS脚本
- 测试JS脚本
- 编写Sass文件
- 编译Sass文件
- 压缩前端文件以及更多
当然我们可以使用gulp编写多个任务，但是从Laravel 5开始，有了一个新的特性——Elixir。
Elixir由Jeffrey Way开发，是一个封装了gulp的任务运行器，用于处理以下这些基本任务：
- 编译Sass，Less和CoffeeScript文件
- 合并样式文件或JS脚本文件
- 单元测试以及更多
1、配置
尽管在官方文档中没有提到，Elixir是可配置的，实际上Elixir在elixir对象上提供了一个config对象，这些配置选项包括：
production—— 检查当前环境是否是生成环境，默认为trueassetsDir—— 前端资源目录路径，默认是resources/assetscssOutput—— 所有css文件默认输出目录，默认是public/cssjsOutput—— 所有JS文件输出目录，默认是public/jssourcemaps—— 是否要生成Source Map（关于什么是Source Map，可参考阮一峰的这篇文章：JavaScript Source Map 详解），默认为true
2、前端资源编译
要使用Elixir，需要在项目根目录下运行如下命令：
npm install
该命令会运行根目录下package.json文件中定义的所有依赖（gulp和laravel-elixir）。
Less 和 Sass
项目根目录下gulpfile.js文件默认内容如下：
var elixir = require('laravel-elixir');
elixir(function(mix) {
mix.less('app.less');
});
这段代码所做的事情就是编译位于resources/assets/less目录下名为app.less的Less文件。编译完成后，生成的CSS文件输出到public/css。
要编译Sass文件操作和上面基本一致，不同之处在于将Sass文件存放在resources/assets/sass目录下而不是resources/assets/less，相应代码如下：
elixir(function(mix) {
mix.sass('app.scss');
});
CoffeeScript
mix对象还提供了coffee方法用于编译resources/assets/coffee目录下的文件，然后将生成的js文件输出到public/js目录下。
编译多个文件也是可以的，你所要做的仅仅是传递包含多个文件的数组到相应方法中：
mix.sass(['awesome.scss', 'legendary.scss']); mix.coffee(['awesome.coffee', 'legendary.coffee']);
方法链
如果你想依次执行多个任务还可以使用方法链：
mix.sass('legendary.scss')
.coffee('legendary.coffee');
Vendor Prefixes（浏览器引擎前缀）
此外，你不必担心CSS浏览器引擎前缀文件，因为Elixir使用了gulp-autoprofixer自动为我们进行了处理。因此你编写了一个需要浏览器引擎前缀的CSS属性，Elixir会自动为你加上。例如，如果你定义的CSS如下：
a:hover {
transform: scale(1.1);
}
最终获取的结果如下：
a:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
transform: scale(1.1);
}
在编译前端资源之前，你应该知道less、sass、rubySass和coffee方法都可以接收三个参数（上面的示例都只传了一个参数）：
- 源文件：要编译的文件名或文件名数组
- 输出路径：保存编译后文件的输出路径
- 配置选项：编译所使用插件的配置选项，例如coffee编译使用的是gulp-coffee插件
3、合并
还可以使用Elixir合并多个文件，要合并样式文件可以使用styles方法：
mix.styles([
'module1.css',
'module2.css'
]);
默认情况下，要合并的源文件位于resources/css目录下，合并后的文件位于public/css，而且合并后的文件保存为app.css。
对JavaScript文件合并而言也是与此类似，只不过使用的合并方法不是styles而是scripts，源文件位于resources/js，合并后的文件保存到public/js，合并后的文件名为app.js：
mix.scripts([
'module1.js', 'module2.js'
]);
改变输出文件路径
要修改数据文件的路径和文件名，可以将输出路径作为第二个参数传递到styles或scripts方法：
mix.scripts(
['module1.js', 'module2.js'],
'path/to/output/file.js'
);
修改源文件路径
默认情况下，Elixir会从resources/文件夹下获取源文件，要修改源文件路径，需要将源文件路径作为第三个参数传递到styles或scripts方法：
mix.scripts(
['module1.js', 'module2.js'],
'path/to/output/file.js',
'path/to/source'
);
mix对象还提供了其他方法用于合并某个目录下的文件，比如使用stylesIn方法可以合并指定目录下的所有css文件：
mix.stylesIn('public/css');
合并某一目录下的所有JavaScript文件可以使用scriptsIn方法：
mix.scriptsIn('public/js');
下一节我们将继续讨论如何使用Elixir为前端资源文件添加版本控制、测试套件、任务运行以及自定义任务和扩展等内容。
8 Comments