认识Elixir，这是汇编资产的方式

用长生不老药简化您的Laravel工作流程：综合指南

>

>许多Web开发人员使用各种工具来增强其工作流程并维护精益代码库。但是，需要汇编的工具，例如CSS和JavaScript预处理器，有时可能会减慢过程。 这是诸如Gulp和Elixir Shine之类的任务跑步者。 本教程探索了杰弗里·道（Jeffrey Way）构建的用户友好的node.js工具Elixir，旨在简化Gulp任务管理，尤其是在Laravel Framework。

本指南重点介绍Laravel中的资产汇编，但也涉及其更广泛的适用性。

密钥概念：

通过将墨西哥湾任务包装在干净的节点。

>安装需要Node.js，Gulp和 package（通过NPM）。> elixir使用默认的源和输出路径，但是这些可以通过方法参数或配置对象进行自定义。> 内置支持包括CSS预处理器编译，JavaScript处理和资产版本。

>自定义任务是使用Elixir的API轻松创建的，并且它与Laravel的刀片模板无缝集成。

> laravel-elixir精灵自动化并简化了工作流程，支持各种CS和JavaScript预处理程序，提高Laravel的发展效率。

>

>先决条件和安装：

node.js：

必不可少的gulp在node.js中运行。 霍姆斯特德改进的用户已经有了这个。

gulp：在全球安装（除非已经通过Homestead改进了）。

>

1. laravel lixir： laravel项目通常包含>。在项目的根目录中使用安装。 对于非拉维尔环境：
2. npm install --global gulp>开始之前：
3. > > elixir假定源文件（>，laravel-elixir，package.json等）位于npm install>中，默认情况下输出为npm install laravel-elixir --save>。
使用

> gulpfile.js函数在您的elixir>中定义了mix elixir任务，该函数将带有

>对象的回调（提供所有可用的方法）。

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

传递数组或通配符编译，并将多个文件串联成app.css>或app.js。 单个文件名导致相同命名的输出文件。 这些默认值是可自定义的。

实践：

• 少量编译：>

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

compiles resources/assets/less/styles.less。 SASS编译使用public/css/styles.css。 Elixir处理供应商前缀。mix.sass()

• >编译CoffeeScript：

将Coffeescript文件从

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

>

编译。resources/assets/coffee/> public/js/app.js

高级技术：

• 多个文件：

  >，，>接受单个文件，通配符，数组或没有参数（对于默认目录中的所有文件）。sass() less() coffee()

>自定义源/输出路径：

• >参数：

  第二个参数指定输出目录：

    elixir(function(mix) {
      mix.less(['file1.less', 'file2.less'], 'custom/path');
    });

  完整路径：
  >带有
  • 的前缀，以指定相对于项目root的路径。

    > ./>

    config对象：
  首选方法正在修改
  • 和

    >中的>对象（稍后讨论）。 css.output js.output config

  串联：
  用于JavaScript和CSS
。 这些接受源和输出路径的参数，类似于汇编方法。
• 和

  >在指定目录中加入所有文件。> scripts() styles() scriptsIn()翡翠到刀片：需要stylesIn()（

  ）。
方法将翡翠编译成刀片模板。

• >laravel-elixir-jade>文件版本：npm install laravel-elixir-jade@0.1.8 --save-devjade()>附加hash到文件名，以防止缓存问题。 在刀片模板中使用

  助手来引用版本的文件。>

• >配置： elixir的行为是通过>中的对象控制的。 通过修改mix.version()>中的elixir()对象或在您的项目root中创建

  >文件来覆盖默认

• 自定义任务：使用config方法来创建自定义GULP任务的方法扩展Elixir的功能。node_modules/laravel-elixir/Config.js

真实世界的场景（laravel/angular）： >

>本节详细介绍了一个完整的示例，该示例演示了Laravel/Angular项目中的长生不老药的功能。 它涵盖了配置长生不老药，更少的编译和咖啡本，将翡翠汇编成刀片和版本管理资产。 提供了完整的

，展示方法链。gulpfile.js

运行任务：

>运行

执行所有精灵任务。 gulp>监视更改的文件，并自动运行任务。 可以运行单个任务（例如，gulp watch）。 使用gulp less进行缩小。gulp --production

结论： elixir简化了GULP任务管理，为通用资产汇编任务提供了用户友好的接口。它的灵活性，可定制性和与Laravel的集成使其成为简化开发工作流程的宝贵工具。 本指南提供了全面的概述，但鼓励对高级功能进行进一步探讨。

以上是认识Elixir，这是汇编资产的方式的详细内容。更多信息请关注PHP中文网其他相关文章！