認識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任務，該函數將帶有

>對象的回調（提供所有可用的方法）。

<code class="language-javascript">elixir(function(mix) {
  mix.less('styles.less');
});</code>

傳遞數組或通配符編譯，並將多個文件串聯成app.css>或app.js。 單個文件名導致相同命名的輸出文件。 這些默認值是可自定義的。

實踐：

• 少量編譯：>

<code class="language-javascript">elixir(function(mix) {
    mix.less("styles.less");
});</code>

compiles resources/assets/less/styles.less。 SASS編譯使用public/css/styles.css。 Elixir處理供應商前綴。 mix.sass()

• >編譯CoffeeScript：

將Coffeescript文件從

<code class="language-javascript">elixir(function(mix) {
    mix.coffee(['controllers.coffee', 'services.coffee']);
});</code>

>

編譯。 resources/assets/coffee/> public/js/app.js

高級技術：

• 多個文件：

  >，，>接受單個文件，通配符，數組或沒有參數（對於默認目錄中的所有文件）。 sass() less() coffee()

>自定義源/輸出路徑：

• >參數：

  第二個參數指定輸出目錄：

  <code class="language-javascript">  elixir(function(mix) {
      mix.less(['file1.less', 'file2.less'], 'custom/path');
    });</code>

  完整路徑：
  >帶有
  • 的前綴，以指定相對於項目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中文網其他相關文章！