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脚本文件 单元测试以及更多

Elixir还支持扩展,所以你可以定义自己的gulp任务并将其添加到Elixir。

1、配置

尽管在官方文档中没有提到,Elixir是可配置的,实际上Elixir在 elixir 对象上提供了一个 config 对象,这些配置选项包括:

production —— 检查当前环境是否是生成环境,默认为 true assetsDir ——前端资源目录路径,默认是 resources/assets cssOutput —— 所有css文件默认输出目录,默认是 public/css jsOutput —— 所有JS文件输出目录,默认是 public/js sourcemaps —— 是否要生成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为前端资源文件添加版本号、编写测试用例、任务运行和监控以及自定义任务和扩展等内容。



分享给朋友:
您可能感兴趣的文章:
随机阅读: