laravel elixir是什么

laravel Elixir是一個(gè)API，該API集成了gulp，為編譯Laravel項(xiàng)目中的less、sass、coffeescript以及處理許多其他日常任務(wù)提供了一個(gè)簡單的解決方案，從而減少編寫上述繁瑣任務(wù)的時(shí)間，有效提高編程效率。

本教程操作環(huán)境：windows7系統(tǒng)、Laravel8.5版、Dell G3電腦。

Laravel的宗旨是讓php開發(fā)變得輕松愉悅，所以從Laravel 5開始，提供了一個(gè)新的被稱作LaravelElixir的API。該API集成了Gulp，為編譯Laravel項(xiàng)目中的Less、Sass、CoffeeScript以及處理許多其他日常任務(wù)提供了一個(gè)簡單的解決方案，從而減少編寫上述繁瑣任務(wù)的時(shí)間，有效提高編程效率。

Laravel Elixir 提供了簡潔流暢的 API，讓你能夠在你的 Laravel 應(yīng)用程序中定義基本的 Gulp 任務(wù)。Elixir 支持許多常見的 css 與 JavaScrtip 預(yù)處理器，甚至包含了測試工具。使用鏈?zhǔn)秸{(diào)用，Elixir 讓你流暢地定義開發(fā)流程，例如：

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

如果你曾經(jīng)對于上手 Gulp 及編譯資源文件感到困惑，那么你將會愛上 Laravel Elixir，不過 Laravel 并不強(qiáng)迫你使用 Elixir，你可以自由的選用你喜歡的自動(dòng)化開發(fā)流程工具。

安裝及配置Gulp

安裝 Node

在開始使用 Elixir 之前，你必須先確定你的機(jī)器上有安裝 Node.JS。

node?-v

默認(rèn)情況下，Laravel Homestead 會包含你所需的一切；但是，如果你沒有使用 vagrant，那么你可以簡單的瀏覽 Node 的下載頁面（http://nodejs.org/download/） 進(jìn)行安裝。【相關(guān)推薦：Gulp】

GulpGulp

接著，你需要全局安裝 Gulp（http://gulpjs.com） 的 npm 擴(kuò)展包：

npm?install?--global?gulp

Laravel ElixirGulp

最后的步驟就是安裝 Elixir！在每一份新安裝的 Laravel 代碼里，你會發(fā)現(xiàn)根目錄有個(gè)名為 package.json 的文件。想像它就如同你的 composer.json 文件，只不過它定義的是 Node 的依賴擴(kuò)展包，而不是 PHP 的。你可以使用以下的命令安裝依賴擴(kuò)展包：

npm?install

如果你是在 Windows 系統(tǒng)上或在 Windows 主機(jī)系統(tǒng)上運(yùn)行 VM 進(jìn)行開發(fā)，你需要在運(yùn)行 npm install 命令時(shí)將 –no-bin-links 開啟：

npm?install?--no-bin-links

運(yùn)行 ElixirGulp

Elixir 是創(chuàng)建于 Gulp 之上，所以要運(yùn)行你的 Elixir 任務(wù)，只需要在命令行運(yùn)行 gulp 命令。在命令增加 –production 標(biāo)示會告知 Elixir 壓縮你的 CSS 及 JavaScript 文件：

//?運(yùn)行所有任務(wù)... gulp  //?運(yùn)行所有任務(wù)并壓縮所有?CSS?及?JavaScript... gulp?--production

監(jiān)控資源文件修改

因?yàn)槊看涡薷哪愕馁Y源文件之后在命令行運(yùn)行 gulp 命令會相當(dāng)不便，因此你可以使用 gulp watch 命令。此命令會在你的命令行運(yùn)行并監(jiān)控資源文件的任何修改。當(dāng)發(fā)生修改時(shí)，新文件將會自動(dòng)被編譯：

gulp?watch

使用樣式Gulp

項(xiàng)目根目錄的 gulpfile.js 包含你所有的 Elixir 任務(wù)。Elixir 任務(wù)可以被鏈?zhǔn)秸{(diào)用起來，以定義你的資源文件該如何進(jìn)行編譯。

LessGulp

要將 Less 編譯為 CSS，你可以使用 less 方法。less 方法會假設(shè)你的 Less 文件被保存在 resources/assets/less 文件夾中。默認(rèn)情況下，此例子的任務(wù)會將編譯后的 CSS 放置于 public/css/app.css：

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

你可能會想合并多個(gè) Less 文件至單個(gè) CSS 文件。同樣的，生成的 CSS 會被放置于 public/css/app.css：

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

如果你想自定義編譯后的 CSS 輸出位置，可以傳遞第二個(gè)參數(shù)至 less 方法：

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 文件的默認(rèn)讀取路徑是 resources/assets/sass，你可以使用此方法：

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

同樣的，如同 less 方法，你可以編譯多個(gè) Sass 文件至單個(gè)的 CSS 文件，甚至可以自定義生成的 CSS 的輸出目錄：

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

純 CSS

如果你只是想將一些純 CSS 樣式合并成單個(gè)的文件，你可以使用 styles 方法。此方法的默認(rèn)路徑為 resources/assets/css 目錄，而生成的 CSS 會被放置于 public/css/all.css：

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

當(dāng)然，你也可以通過傳遞第二個(gè)參數(shù)至 styles 方法，將生成的文件輸出至指定的位置：

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

Source maps

Source maps 在默認(rèn)情況下是開啟的。因此，針對每個(gè)被編譯的文件，同目錄內(nèi)都會伴隨著一個(gè) *.css.map 文件。這個(gè)文件能夠讓你在瀏覽器調(diào)試時(shí)，可以追蹤編譯后的樣式選擇器至原始的 Sass 或 Less 位置。

如果你不想為你的 CSS 生成 source maps，你可以使用一個(gè)簡單的配置選項(xiàng)關(guān)閉它們：

elixir.config.sourcemaps?=?false;  elixir(function(mix)?{ ????mix.sass('app.scss'); });

使用腳本

Elixir 也提供了一些函數(shù)來幫助你使用 JavaScript 文件，像是編譯 ecmascript 6、編譯 CoffeeScript、Browserify、壓縮、及簡單的串聯(lián)純 JavaScript 文件。

CoffeeScript

coffee 方法可以用于編譯 CoffeeScript 至純 JavaScript。coffee 函數(shù)接收一個(gè)相對于 resources/assets/coffee 目錄的 CoffeeScript 文件名字符串或數(shù)組，接著在 public/js 目錄生成單個(gè)的 app.js 文件：

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

Browserify

Elixir 還附帶了一個(gè) browserify 方法，給予你在瀏覽器引入模塊及 ECMAScript 6 的有用的特性。

此任務(wù)假設(shè)你的腳本都保存在 resources/assets/js，并會將生成的文件放置于 public/js/main.js：

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

雖然 Browserify 附帶了 Partialify 及 Babelify 轉(zhuǎn)換器，但是只要你愿意，你可以隨意安裝并增加更多的轉(zhuǎn)換器：

npm?install?aliasify?--save-dev

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

Babel

babel 方法可被用于編譯 ECMAScript 6 與 7 至純 JavaScript。此函數(shù)接收一個(gè)相對于 resources/assets/js 目錄的文件數(shù)組，接著在 public/js 目錄生成單個(gè)的 all.js 文件：

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

若要選擇不同的輸出位置，只需簡單的指定你希望的路徑作為第二個(gè)參數(shù)。該方法除了 Babel 的編譯外，特色與功能同等于 mix.scripts()。

Scripts

如果你想將多個(gè) JavaScript 文件合并至單個(gè)文件，你可以使用 scripts 方法。

scripts 方法假設(shè)所有的路徑都相對于 resources/assets/js 目錄，且默認(rèn)會將生成的 JavaScript 放置于 public/js/all.js：

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

如果你想多個(gè)腳本的集合合并成不同文件，你可以使用調(diào)用多個(gè) scripts 方法。給予該方法的第二個(gè)參數(shù)會為每個(gè)串聯(lián)決定生成的文件名稱：

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：

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

復(fù)制文件與目錄

copy 方法可以復(fù)制文件與目錄至新位置。所有操作路徑都相對于項(xiàng)目的根目錄：

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

版本與緩存清除

許多的開發(fā)者會在它們編譯后的資源文件中加上時(shí)間戳或是唯一的 Token，強(qiáng)迫瀏覽器加載全新的資源文件以取代提供的舊版本代碼副本。你可以使用 version 方法讓 Elixir 處理它們。

version 方法接收一個(gè)相對于 public 目錄的文件名稱，接著為你的文件名稱加上唯一的哈希值，以防止文件被緩存。舉例來說，生成出來的文件名稱可能像這樣：all-16d570a7.css：

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

在為文件生成版本之后，你可以在你的 視圖 中使用 Laravel 的全局 elixir PHP 輔助函數(shù)來正確加載名稱被哈希后的文件。elixir 函數(shù)會自動(dòng)判斷被哈希的文件名稱：

<link>

為多個(gè)文件生成版本

你可以傳遞一個(gè)數(shù)組至 version 方法來為多個(gè)文件生成版本：

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

一旦該文件被加上版本，你需要使用 elixir 輔助函數(shù)來生成哈希文件的正確鏈接。切記，你只需要傳遞未哈希文件的名稱至 elixir 輔助函數(shù)。此函數(shù)會自動(dòng)使用未哈希的名稱來判斷該文件為目前的哈希版本：

<link><script></script>

BrowserSync

當(dāng)你對前端資源進(jìn)行修改后，BrowserSync 會自動(dòng)刷新你的網(wǎng)頁瀏覽器。你可以使用 browserSync 方法來告知 Elixir，當(dāng)你運(yùn)行 gulp watch 命令時(shí)啟動(dòng) BrowserSync 服務(wù)器：

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

一旦你運(yùn)行 gulp watch，就能使用連接端口 3000 啟用瀏覽器同步并訪問你的網(wǎng)頁應(yīng)用程序：http://homestead.app:3000。如果你在本機(jī)開發(fā)所使用的域名不是 homestead.app，那么你可以傳遞一個(gè) 選項(xiàng) 的數(shù)組作為 browserSync 方法的第一個(gè)參數(shù)：

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

調(diào)用既有的 Gulp 任務(wù)

如果你需要在 Elixir 調(diào)用一個(gè)既有的 Gulp 任務(wù)，你可以使用 task 方法。舉個(gè)例子，假設(shè)你有一個(gè) Gulp 任務(wù)，當(dāng)你調(diào)用時(shí)會輸出一些簡單的文本：

gulp.task('speak',?function()?{ ????var?message?=?'Tea...Earl?Grey...Hot';  ????gulp.src('').pipe(shell('say?'?+?message)); });

如果你希望在 Elixir 中調(diào)用這個(gè)任務(wù)，使用 mix.task 方法并傳遞該任務(wù)的名稱作為該方法唯一的參數(shù)：

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

自定義監(jiān)控器

如果你想注冊一個(gè)監(jiān)控器讓你的自定義任務(wù)能在每次文件改變時(shí)就運(yùn)行，只需傳遞一個(gè)正則表達(dá)式作為 task 方法的第二個(gè)參數(shù)：

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

編寫 Elixir 擴(kuò)展功能

如果你需要比 Elixir 的 task 方法更靈活的方案，你可以創(chuàng)建自定義的 Elixir 擴(kuò)展功能。Elixir 擴(kuò)展功能允許你傳遞參數(shù)至你的自定義任務(wù)。舉例來說，你可以編寫一個(gè)擴(kuò)展功能，像是：

//?文件：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 第二個(gè)參數(shù)傳遞的構(gòu)造器函數(shù)里面。你可以將此擴(kuò)展功能放置在 Gulpfile 的上方，取而代之也可以導(dǎo)出至一個(gè)自定義任務(wù)的文件。舉個(gè)例子，如果你將你的擴(kuò)展功能放置在 elixir-extensions.js 文件中，那么你可以在 Gulpfile 中像這樣引入該文件：

//?文件：Gulpfile.js  var?elixir?=?require('laravel-elixir');  require('./elixir-extensions')  elixir(function(mix)?{ ????mix.speak('Tea,?Earl?Grey,?Hot'); });

自定義監(jiān)控器

如果你想在運(yùn)行 gulp watch 時(shí)能夠重新觸發(fā)你的自定義任務(wù)，你可以注冊一個(gè)監(jiān)控器：

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

相關(guān)推薦：Gulp