编译资源 (Laravel Elixir)

介绍
安装与设置
运行 Elixir
处理样式表
处理脚本
复制文件和目录
版本控制 / 缓存清除
BrowserSync

介绍

Laravel Elixir 为定义 Laravel 应用程序的基本 Gulp 任务提供了一个简洁、流畅的 API。Elixir 支持常见的 CSS 和 JavaScript 预处理器，如 Sass 和 Webpack。通过方法链，Elixir 允许您流畅地定义资源管道。例如：

javascript

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

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

安装与设置

安装 Node

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

php

node -v
npm -v

默认情况下，Laravel Homestead 包含您所需的一切；然而，如果您不使用 Vagrant，您可以通过下载页面的简单图形安装程序轻松安装最新版本的 Node 和 NPM。

Gulp

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

php

npm install --global gulp-cli

Laravel Elixir

剩下的唯一步骤是安装 Laravel Elixir。在 Laravel 的全新安装中，您会在目录结构的根目录中找到一个 package.json 文件。默认的 package.json 文件包括 Elixir 和 Webpack JavaScript 模块打包器。可以将其视为 composer.json 文件，但它定义的是 Node 依赖项而不是 PHP。您可以通过运行以下命令安装它引用的依赖项：

php

npm install

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

php

npm install --no-bin-links

运行 Elixir

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

php

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

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

运行此命令后，您将看到一个格式良好的表格，显示刚刚发生的事件的摘要。

监视资源的更改

gulp watch 命令将在您的终端中继续运行，并监视您的资源是否有任何更改。如果您在 watch 命令运行时修改它们，Gulp 将自动重新编译您的资源：

php

gulp watch

处理样式表

项目根目录中的 gulpfile.js 文件包含您所有的 Elixir 任务。Elixir 任务可以链接在一起，以定义您的资源应如何编译。

Less

less 方法可用于将 Less 编译为 CSS。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');
});

自定义路径

虽然建议您使用 Laravel 的默认资源目录，但如果您需要不同的基本目录，可以在任何文件路径前加上 ./。这会指示 Elixir 从项目根目录开始，而不是使用默认的基本目录。

例如，要编译位于 app/assets/sass/app.scss 的文件并将结果输出到 public/css/app.css，您可以对 sass 方法进行如下调用：

javascript

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

Stylus

stylus 方法可用于将 Stylus 编译为 CSS。假设您的 Stylus 文件存储在 resources/assets/stylus 中，您可以像这样调用该方法：

javascript

elixir(function(mix) {
    mix.stylus('app.styl');
});

NOTE

此方法的签名与 mix.less() 和 mix.sass() 相同。

纯 CSS

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

javascript

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

您还可以通过将第二个参数传递给 styles 方法来指示 Elixir 将生成的文件写入自定义目录或文件：

javascript

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

源映射

在 Elixir 中，源映射默认启用，并在使用编译后的资源时为浏览器的开发者工具提供更好的调试信息。对于每个相关的编译文件，您将在同一目录中找到一个伴随的 *.css.map 或 *.js.map 文件。

如果您不希望为应用程序生成源映射，可以使用 sourcemaps 配置选项禁用它们：

javascript

elixir.config.sourcemaps = false;

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

处理脚本

Elixir 提供了多种功能来帮助您处理 JavaScript 文件，例如编译 ECMAScript 2015、模块打包、压缩以及简单地连接纯 JavaScript 文件。

在编写带有模块的 ES2015 时，您可以在 Webpack 和 Rollup 之间进行选择。如果这些工具对您来说很陌生，不用担心，Elixir 将在幕后处理所有繁重的工作。默认情况下，Laravel 的 gulpfile 使用 webpack 来编译 JavaScript，但您可以自由使用任何模块打包器。

Webpack

webpack 方法可用于将 ECMAScript 2015 编译并打包为纯 JavaScript。此函数接受相对于 resources/assets/js 目录的文件路径，并在 public/js 目录中生成一个打包文件：

javascript

elixir(function(mix) {
    mix.webpack('app.js');
});

要选择不同的输出或基本目录，只需使用前导 . 指定所需的路径。然后您可以指定相对于应用程序根目录的路径。例如，要将 app/assets/js/app.js 编译为 public/dist/app.js：

javascript

elixir(function(mix) {
    mix.webpack(
        './app/assets/js/app.js',
        './public/dist'
    );
});

如果您想利用更多的 Webpack 功能，Elixir 将读取项目根目录中的任何 webpack.config.js 文件，并将其配置因素纳入构建过程中。

Rollup

与 Webpack 类似，Rollup 是一个用于 ES2015 的下一代打包器。此函数接受相对于 resources/assets/js 目录的文件数组，并在 public/js 目录中生成一个文件：

javascript

elixir(function(mix) {
    mix.rollup('app.js');
});

与 webpack 方法一样，您可以自定义传递给 rollup 方法的输入和输出文件的位置：

php

elixir(function(mix) {
    mix.rollup(
        './resources/assets/js/app.js',
        './public/dist'
    );
});

脚本

如果您有多个 JavaScript 文件想要合并成一个文件，可以使用 scripts 方法，该方法提供自动源映射、连接和压缩。

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

javascript

elixir(function(mix) {
    mix.scripts([
        'order.js',
        'forum.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');
});

NOTE

如果您打算连接多个预先压缩的供应商库，例如 jQuery，请考虑使用 mix.combine()。这将合并文件，同时省略源映射和压缩步骤。结果，编译时间将大大缩短。

复制文件和目录

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

javascript

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

版本控制 / 缓存清除

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

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

javascript

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

生成版本化文件后，您可以在视图中使用 Laravel 的全局 elixir 辅助函数来加载适当的哈希资源。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 方法接受一个包含 proxy 属性的 JavaScript 对象，该属性包含应用程序的本地 URL。然后，一旦您运行 gulp watch，您可以使用端口 3000 (http://project.dev:3000) 访问您的 Web 应用程序以享受浏览器同步：

javascript

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

编译资源 (Laravel Elixir) ​

介绍 ​

安装与设置 ​

安装 Node ​

Gulp ​

Laravel Elixir ​

运行 Elixir ​

监视资源的更改 ​

处理样式表 ​

Less ​

Sass ​

自定义路径 ​

Stylus ​

纯 CSS ​

源映射 ​

处理脚本 ​

Webpack ​

Rollup ​

脚本 ​

复制文件和目录 ​

版本控制 / 缓存清除 ​

版本控制多个文件 ​

BrowserSync ​

编译资源 (Laravel Elixir)

介绍

安装与设置

安装 Node

Gulp

Laravel Elixir

运行 Elixir

监视资源的更改

处理样式表

Less

Sass

自定义路径

Stylus

纯 CSS

源映射

处理脚本

Webpack

Rollup

脚本

复制文件和目录

版本控制 / 缓存清除

版本控制多个文件

BrowserSync