Laravel Elixir 深入探究（二）：版本控制、测试套件、任务执行以及自定义任务和扩展

4、版本控制

我们接着上一节继续往下讲，当你修改一个JavaScript或者CSS文件后需要将其推送到服务器上。当用户在浏览器中访问站点时，有些用户也许可以立即获取到最新修改的前端资源文件，而另一些用户的浏览器可能仍然使用的是之前的缓存文件，这样就不能看到最新的效果。要修复这一问题，开发者可以通过修改文件名或者追加一个查询字符串到文件名后，又或者在文件名后追加一个随机字符串，该过程被称作版本控制或哈希。

Elixir也支持版本控制，要为文件添加版本控制，可以使用version方法：

mix.version('path/to/file');

注：该方法中传入的路径相对于public文件夹。

同时对多个文件添加版本控制也是可以的，和之前mix对象提供的其他方法一样，只需要传入文件数组即可：

mix.version(['path/to/file1', 'path/to/file2']);

添加版本控制后的所有文件被保存到public/build目录，并且在文件名和文件扩展之间多了一个唯一散列值（也可以成为唯一版本号）：

mix.version('css/main.css'); // public/build/css/main-39d5f9a7.css
mix.version('js/app.js'); // public/build/js/app-78efbae6.js

要想在Blade模板或者只是php文件（未使用Blade）中一直使用最新版本的前端资源文件，可以使用Laravel提供的帮助函数elixir（如果没有这个方法你就只能每次手动输入编译后的包含散列值的文件名）：

<link rel="stylesheet" href="{{ elixir('css/main.css') }}" />
<script src="{{ elixir('js/main.js') }}"></script>

5、运行测试套件

所谓测试套件指的是一组测试用例集合，用于测试软件/应用在指定场景中能否实现预期效果。

默认情况下Elixir为测试套件准备了两个任务，一个是phpunit，而另一个是phpspec，在gulpfile.js文件中，调用mix对象上的phpUnit方法进行phpunit测试：

mix.phpUnit();

而进行phpspec测试方法如下：

mix.phpSpec();

6、执行Elixir任务

要运行以上列出的所有任务，只需在Laravel项目根目录下运行如下命令即可：

gulp

这会运行定义在gulpfile.js文件中的所有任务。如果你不想在每次修改后重新运行gulp命令，可以通过如下方式实现：

监听文件修改

使用如下命令：

gulp watch

将会监听所有前端文件修改，因此无论何时你保存一个Sass文件，该文件都会自动编译；如果定义了测试任务，无论何时你保存php文件，配置的测试套件都会运行。

你还可以添加一个选项--production到gulp命令以触发前端资源优化，例如最小化。

执行单个任务

有时候你可能只想运行单个任务，比如编译样式文件：

gulp styles

如果是编译CoffeeScript文件可以运行如下命令：

gulp scripts

如果是运行测试套件可以运行：

gulp tdd

该命令不仅会运行测试套件，还会监听文件修改。

7、自定义任务和扩展

通过上面的使用示例很明显Laravel Elixir自带了很多有用的任务，但是，还有很多需求这些自带的任务不能满足，比如Stylus编译，图片压缩等。如果要定义自己的任务，只需简单扩展Elixir即可：

elixir.extend(nameOfTask, function(arguments) {
    // 定义一个gulp任务
    // 设置监听特定文件的监听器（可选）
    // 将gulp任务推入队列
});

接下来我们来构建一个记录当前日期到控制台的简单任务：

var gulp = require('gulp'),
elixir = require('laravel-elixir');

elixir.extend('logDate', function() {
    gulp.task('date_logger', function() {
        console.log(new Date());
    });

    // this.registerWatcher('date_logger', '/**/*.js');
    return this.queueTask('date_logger');
});

要使用上面这个任务，可以在mix对象上进行如下调用：

mix.logDate();

然后去命令行运行：

gulp watch

这样每次修改js文件保存后都会执行logDate任务。