Laravel Elixir

介绍
安装与设置
运行 Elixir
处理样式表
处理脚本
复制文件和目录
版本控制 / 缓存清除
BrowserSync
调用现有的 Gulp 任务
编写 Elixir 扩展

介绍

Laravel Elixir 为你的 Laravel 应用程序提供了一个简洁、流畅的 API，用于定义基本的 Gulp 任务。Elixir 支持多种常见的 CSS 和 JavaScript 预处理器，甚至包括测试工具。通过方法链，Elixir 允许你流畅地定义你的资源管道。例如：

javascript

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

如果你曾经对如何开始使用 Gulp 和资源编译感到困惑，你会喜欢 Laravel Elixir。不过，在开发应用程序时，你并不需要使用它。你可以自由选择任何资源管道工具，甚至可以不使用任何工具。

安装与设置

安装 Node

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

php

node -v

默认情况下，Laravel Homestead 包含了你所需的一切；然而，如果你没有使用 Vagrant，你可以通过访问 Node.js 下载页面轻松安装 Node。

Gulp

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

php

npm install --global gulp

Laravel Elixir

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

php

npm install

如果你在 Windows 系统上开发，或者在 Windows 主机系统上运行虚拟机，你可能需要在运行 npm install 命令时启用 --no-bin-links 开关：

php

npm install --no-bin-links

运行 Elixir

Elixir 构建在 Gulp 之上，因此要运行你的 Elixir 任务，你只需在终端中运行 gulp 命令。将 --production 标志添加到命令中将指示 Elixir 压缩你的 CSS 和 JavaScript 文件：

php

// 运行所有任务...
gulp

// 运行所有任务并压缩所有 CSS 和 JavaScript...
gulp --production

监视资源的变化

由于在每次更改资源后在终端中运行 gulp 命令很不方便，你可以使用 gulp watch 命令。此命令将在你的终端中持续运行，并监视你的资源是否有任何更改。当发生更改时，新文件将自动编译：

php

gulp watch

处理样式表

项目根目录中的 gulpfile.js 文件包含了所有的 Elixir 任务。Elixir 任务可以链式调用，以定义你的资源应如何编译。

Less

要将 Less 编译为 CSS，你可以使用 less 方法。less 方法假定你的 Less 文件存储在 resources/assets/less 中。默认情况下，此示例的任务会将编译后的 CSS 放置在 public/css/app.css 中：

javascript

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

你还可以将多个 Less 文件合并为一个 CSS 文件。同样，生成的 CSS 将放置在 public/css/app.css 中：

javascript

elixir(function(mix) {
    mix.less([
        'app.less',
        'controllers.less'
    ]);
});

如果你希望自定义编译后 CSS 的输出位置，可以将第二个参数传递给 less 方法：

javascript

elixir(function(mix) {
    mix.less('app.less', 'public/stylesheets');
});

// 指定特定的输出文件名...
elixir(function(mix) {
    mix.less('app.less', 'public/stylesheets/style.css');
});

Sass

sass 方法允许你将 Sass 编译为 CSS。假设你的 Sass 文件存储在 resources/assets/sass 中，你可以这样使用该方法：

javascript

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

同样，像 less 方法一样，你可以将多个 Sass 文件编译为一个 CSS 文件，甚至可以自定义生成的 CSS 的输出目录：

javascript

elixir(function(mix) {
    mix.sass([
        'app.scss',
        'controllers.scss'
    ], 'public/assets/css');
});

纯 CSS

如果你只想将一些纯 CSS 样式表合并为一个文件，可以使用 styles 方法。传递给此方法的路径是相对于 resources/assets/css 目录的，生成的 CSS 将放置在 public/css/all.css 中：

javascript

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

当然，你也可以通过将第二个参数传递给 styles 方法来自定义生成文件的输出位置：

javascript

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

源映射

源映射默认启用。因此，对于每个编译的文件，你会在同一目录中找到一个伴随的 *.css.map 文件。此映射允许你在浏览器中调试时将编译后的样式表选择器追溯到原始的 Sass 或 Less。

如果你不希望为 CSS 生成源映射，可以使用一个简单的配置选项禁用它们：

javascript

elixir.config.sourcemaps = false;

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

处理脚本

Elixir 还提供了几个函数来帮助你处理 JavaScript 文件，例如编译 ECMAScript 6、编译 CoffeeScript、Browserify、压缩以及简单地连接纯 JavaScript 文件。

CoffeeScript

coffee 方法可用于将 CoffeeScript 编译为纯 JavaScript。coffee 函数接受一个字符串或 CoffeeScript 文件数组，这些文件相对于 resources/assets/coffee 目录，并在 public/js 目录中生成一个 app.js 文件：

javascript

elixir(function(mix) {
    mix.coffee(['app.coffee', 'controllers.coffee']);
});

Browserify

Elixir 还附带了一个 browserify 方法，它为你提供了在浏览器中使用模块和 ECMAScript 6 的所有好处。

此任务假定你的脚本存储在 resources/assets/js 中，并将生成的文件放置在 public/js/main.js 中：

javascript

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

虽然 Browserify 附带了 Partialify 和 Babelify 转换器，但你可以自由安装和添加更多转换器：

php

npm install aliasify --save-dev

javascript

elixir.config.js.browserify.transformers.push({
    name: 'aliasify',
    options: {}
});

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

Babel

babel 方法可用于将 ECMAScript 6 和 7 编译为纯 JavaScript。此函数接受一个相对于 resources/assets/js 目录的文件数组，并在 public/js 目录中生成一个 all.js 文件：

javascript

elixir(function(mix) {
    mix.babel([
        'order.js',
        'product.js'
    ]);
});

要选择不同的输出位置，只需将所需路径指定为第二个参数。此方法的签名和功能与 mix.scripts() 相同，但不包括 Babel 编译。

脚本

如果你有多个 JavaScript 文件想要合并为一个文件，可以使用 scripts 方法。

scripts 方法假定所有路径都是相对于 resources/assets/js 目录的，并默认将生成的 JavaScript 放置在 public/js/all.js 中：

javascript

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

如果你需要将多个脚本集合并为不同的文件，可以多次调用 scripts 方法。传递给方法的第二个参数决定了每个连接的结果文件名：

javascript

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 中：

javascript

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

复制文件和目录

copy 方法可用于将文件和目录复制到新位置。所有操作都是相对于项目的根目录进行的：

javascript

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

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

版本控制 / 缓存清除

许多开发人员在编译后的资源后面加上时间戳或唯一标记，以强制浏览器加载新资源而不是提供过时的代码副本。Elixir 可以使用 version 方法为你处理此问题。

version 方法接受一个相对于 public 目录的文件名，并将一个唯一的哈希附加到文件名上，以实现缓存清除。例如，生成的文件名将类似于：all-16d570a7.css：

javascript

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

生成版本化文件后，你可以在视图中使用 Laravel 的全局 elixir PHP 辅助函数来加载适当的哈希资源。elixir 函数将自动确定哈希文件的名称：

php

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

版本化多个文件

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

javascript

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

一旦文件被版本化，你可以使用 elixir 辅助函数生成指向正确哈希文件的链接。请记住，你只需将未哈希文件的名称传递给 elixir 辅助函数。辅助函数将使用未哈希名称来确定文件的当前哈希版本：

php

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

<script src="{{ elixir('js/app.js') }}"></script>

BrowserSync

BrowserSync 在你对前端资源进行更改后会自动刷新你的网页浏览器。你可以使用 browserSync 方法来指示 Elixir 在你运行 gulp watch 命令时启动一个 BrowserSync 服务器：

javascript

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

一旦你运行 gulp watch，使用端口 3000 访问你的 Web 应用程序以启用浏览器同步：http://homestead.app:3000。如果你在本地开发中使用的域名不是 homestead.app，你可以将一个选项数组作为第一个参数传递给 browserSync 方法：

javascript

elixir(function(mix) {
    mix.browserSync({
    	proxy: 'project.app'
    });
});

调用现有的 Gulp 任务

如果你需要从 Elixir 调用现有的 Gulp 任务，可以使用 task 方法。举个例子，假设你有一个 Gulp 任务，在调用时简单地说出一些文本：

javascript

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

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

如果你希望从 Elixir 调用此任务，请使用 mix.task 方法，并将任务名称作为唯一参数传递给该方法：

javascript

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

自定义监视器

如果你需要注册一个监视器以在每次修改某些文件时运行你的自定义任务，请将正则表达式作为第二个参数传递给 task 方法：

javascript

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

编写 Elixir 扩展

如果你需要比 Elixir 的 task 方法提供的更灵活的功能，可以创建自定义 Elixir 扩展。Elixir 扩展允许你向自定义任务传递参数。例如，你可以这样编写一个扩展：

javascript

// 文件：elixir-extensions.js

var gulp = require('gulp');
var shell = require('gulp-shell');
var Elixir = require('laravel-elixir');

var Task = Elixir.Task;

Elixir.extend('speak', function(message) {

    new Task('speak', function() {
        return gulp.src('').pipe(shell('say ' + message));
    });

});

// mix.speak('Hello World');

就是这样！请注意，你的 Gulp 特定逻辑应放置在传递给 Task 构造函数的第二个参数的函数中。你可以将其放在 Gulpfile 的顶部，或者将其提取到自定义任务文件中。例如，如果你将扩展放在 elixir-extensions.js 中，可以从主 Gulpfile 中引入该文件，如下所示：

javascript

// 文件：Gulpfile.js

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

require('./elixir-extensions')

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

自定义监视器

如果你希望在运行 gulp watch 时重新触发自定义任务，可以注册一个监视器：

javascript

new Task('speak', function() {
    return gulp.src('').pipe(shell('say ' + message));
})
.watch('./app/**');

Laravel Elixir ​

介绍 ​

安装与设置 ​

安装 Node ​

Gulp ​

Laravel Elixir ​

运行 Elixir ​

监视资源的变化 ​

处理样式表 ​

Less ​

Sass ​

纯 CSS ​

源映射 ​

处理脚本 ​

CoffeeScript ​

Browserify ​

Babel ​

脚本 ​

复制文件和目录 ​

版本控制 / 缓存清除 ​

版本化多个文件 ​

BrowserSync ​

调用现有的 Gulp 任务 ​

自定义监视器 ​

编写 Elixir 扩展 ​

自定义监视器 ​

Laravel Elixir

介绍

安装与设置

安装 Node

Gulp

Laravel Elixir

运行 Elixir

监视资源的变化

处理样式表

Less

Sass

纯 CSS

源映射

处理脚本

CoffeeScript

Browserify

Babel

脚本

复制文件和目录

版本控制 / 缓存清除

版本化多个文件

BrowserSync

调用现有的 Gulp 任务

自定义监视器

编写 Elixir 扩展

自定义监视器