Laravel Elixir

• 介绍
• 安装与设置
• 使用
• Gulp
• 扩展

介绍

Laravel Elixir 为定义 Laravel 应用程序的基本 Gulp 任务提供了一个简洁、流畅的 API。Elixir 支持多种常见的 CSS 和 JavaScript 预处理器，甚至包括测试工具。

如果你曾经对如何开始使用 Gulp 和资产编译感到困惑，你一定会喜欢 Laravel Elixir！

安装与设置

安装 Node

在触发 Elixir 之前，你必须先确保你的机器上安装了 Node.js。

node -v

默认情况下，Laravel Homestead 包含了你所需的一切；然而，如果你不使用 Vagrant，你可以通过访问 Node.js 下载页面 来轻松安装 Node。别担心，这很快也很简单！

Gulp

接下来，你需要将 Gulp 作为全局 NPM 包引入，如下所示：

npm install --global gulp

Laravel Elixir

剩下的唯一步骤就是安装 Elixir！在新的 Laravel 安装中，你会在根目录找到一个 package.json 文件。可以将其视为 composer.json 文件，但它定义的是 Node 依赖项而不是 PHP。你可以通过运行以下命令来安装它引用的依赖项：

npm install

使用

现在你已经安装了 Elixir，你将很快开始编译和连接文件！项目根目录中的 gulpfile.js 文件包含了所有的 Elixir 任务。

编译 Less

elixir(function(mix) {
	mix.less("app.less");
});

在上面的例子中，Elixir 假设你的 Less 文件存储在 resources/assets/less 中。

编译多个 Less 文件

elixir(function(mix) {
	mix.less([
		'app.less',
		'something-else.less'
	]);
});

编译 Sass

elixir(function(mix) {
	mix.sass("app.scss");
});

这假设你的 Sass 文件存储在 resources/assets/sass 中。

默认情况下，Elixir 在底层使用 LibSass 库进行编译。在某些情况下，使用 Ruby 版本可能更有利，尽管速度较慢，但功能更丰富。假设你已经安装了 Ruby 和 Sass gem（gem install sass），你可以像这样启用 Ruby 模式：

elixir(function(mix) {
	mix.rubySass("app.sass");
});

编译时不使用源映射

elixir.config.sourcemaps = false;

elixir(function(mix) {
	mix.sass("app.scss");
});

源映射默认是启用的。因此，对于每个编译的文件，你会在同一目录中找到一个伴随的 *.css.map 文件。此映射允许你在调试时将编译后的样式表选择器追溯到原始的 Sass 或 Less 部分！如果你需要禁用此功能，上面的代码示例将完成此操作。

编译 CoffeeScript

elixir(function(mix) {
	mix.coffee();
});

这假设你的 CoffeeScript 文件存储在 resources/assets/coffee 中。

编译所有 Less 和 CoffeeScript

elixir(function(mix) {
    mix.less()
       .coffee();
});

触发 PHPUnit 测试

elixir(function(mix) {
	mix.phpUnit();
});

触发 PHPSpec 测试

elixir(function(mix) {
	mix.phpSpec();
});

合并样式表

elixir(function(mix) {
	mix.styles([
		"normalize.css",
		"main.css"
	]);
});

传递给此方法的路径相对于 resources/assets/css 目录。

合并样式表并保存到自定义目录

elixir(function(mix) {
	mix.styles([
		"normalize.css",
		"main.css"
	], 'public/build/css/everything.css');
});

从自定义基础目录合并样式表

elixir(function(mix) {
	mix.styles([
		"normalize.css",
		"main.css"
	], 'public/build/css/everything.css', 'public/css');
});

styles 和 scripts 方法的第三个参数确定传递给方法的所有路径的相对目录。

合并目录中的所有样式

elixir(function(mix) {
	mix.stylesIn("public/css");
});

合并脚本

elixir(function(mix) {
	mix.scripts([
		"jquery.js",
		"app.js"
	]);
});

同样，这假设所有路径相对于 resources/assets/js 目录。

合并目录中的所有脚本

elixir(function(mix) {
	mix.scriptsIn("public/js/some/directory");
});

合并多组脚本

elixir(function(mix) {
    mix.scripts(['jquery.js', 'main.js'], 'public/js/main.js')
       .scripts(['forum.js', 'threads.js'], 'public/js/forum.js');
});

版本化/哈希化文件

elixir(function(mix) {
	mix.version("css/all.css");
});

这将为文件名附加一个唯一的哈希值，以实现缓存清除。例如，生成的文件名将类似于：all-16d570a7.css。

在你的视图中，你可以使用 elixir() 函数加载适当的哈希资产。以下是一个示例：

<link rel="stylesheet" href="{{ elixir("css/all.css") }}">

在后台，elixir() 函数将确定应包含的哈希文件的名称。你是否已经感受到肩上的负担减轻了？

你还可以将数组传递给 version 方法以版本化多个文件：

elixir(function(mix) {
	mix.version(["css/all.css", "js/app.js"]);
});

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

将文件复制到新位置

elixir(function(mix) {
	mix.copy('vendor/foo/bar.css', 'public/css/bar.css');
});

将整个目录复制到新位置

elixir(function(mix) {
	mix.copy('vendor/package/views', 'resources/views');
});

触发 Browserify

elixir(function(mix) {
	mix.browserify('index.js');
});

想在浏览器中使用模块吗？希望尽早使用 EcmaScript 6？需要内置的 JSX 转换器吗？如果是这样，Browserify，以及 browserify Elixir 任务，将很好地完成这项工作。

此任务假设你的脚本存储在 resources/assets/js 中，尽管你可以自由覆盖默认设置。

方法链

当然，你可以将 Elixir 的几乎所有方法链接在一起以构建你的配方：

elixir(function(mix) {
    mix.less("app.less")
       .coffee()
       .phpUnit()
       .version("css/bootstrap.css");
});

Gulp

现在你已经告诉 Elixir 要执行哪些任务，你只需从命令行触发 Gulp。

执行所有注册的任务一次

gulp

监视资产的变化

gulp watch

仅编译脚本

gulp scripts

仅编译样式

gulp styles

监视测试和 PHP 类的变化

gulp tdd

NOTE

所有任务将假定为开发环境，并将排除缩小。对于生产环境，请使用 gulp --production。

自定义任务和扩展

有时，你会希望将自己的 Gulp 任务挂接到 Elixir 中。也许你有一个特殊的功能，希望 Elixir 为你混合和监视。没问题！

例如，假设你有一个通用任务，在调用时简单地说出一些文本。

gulp.task("speak", function() {
	var message = "Tea...Earl Grey...Hot";

	gulp.src("").pipe(shell("say " + message));
});

很简单。从命令行，你当然可以调用 gulp speak 来触发任务。然而，要将其添加到 Elixir 中，请使用 mix.task() 方法：

elixir(function(mix) {
    mix.task('speak');
});

就是这样！现在，每次你运行 Gulp 时，你的自定义 "speak" 任务将与任何其他 Elixir 任务一起执行。要另外注册一个监视器，以便每次一个或多个文件被修改时重新触发你的自定义任务，你可以将正则表达式作为第二个参数传递。

elixir(function(mix) {
    mix.task('speak', 'app/**/*.php');
});

通过添加第二个参数，我们指示 Elixir 每次保存 "app/" 目录中的 PHP 文件时重新触发 "speak" 任务。

为了获得更大的灵活性，你可以创建完整的 Elixir 扩展。使用之前的 "speak" 示例，你可以编写一个扩展，如下所示：

var gulp = require("gulp");
var shell = require("gulp-shell");
var elixir = require("laravel-elixir");

elixir.extend("speak", function(message) {

	gulp.task("speak", function() {
		gulp.src("").pipe(shell("say " + message));
	});

	return this.queueTask("speak");

 });

注意，我们通过传递将在 Gulpfile 中引用的名称以及将创建 Gulp 任务的回调函数来 extend Elixir 的 API。

如前所述，如果你希望监视自定义任务，请注册一个监视器。

this.registerWatcher("speak", "app/**/*.php");

这行代码指定当任何匹配正则表达式 app/**/*.php 的文件被修改时，我们希望触发 speak 任务。

就是这样！你可以将其放在 Gulpfile 的顶部，或者将其提取到自定义任务文件中。如果你选择后者，只需将其引入 Gulpfile，如下所示：

require("./custom-tasks")

完成了！现在，你可以将其混合使用。

elixir(function(mix) {
	mix.speak("Tea, Earl Grey, Hot");
});

有了这个添加，每次你触发 Gulp 时，Picard 将请求一些茶。