Laravel Elixir

簡(jiǎn)介

Laravel Elixir 提供了簡(jiǎn)潔流暢的 API，讓你能夠?yàn)槟愕?Laravel 應(yīng)用程序定義基本的 Gulp 任務(wù)。Elixir 支持許多常見(jiàn)的 CSS 與 JavaScrtip 預(yù)處理器，甚至包含了測(cè)試工具。

如果你曾經(jīng)對(duì)于使用 Gulp 及編譯資源感到困惑，那么你絕對(duì)會(huì)愛(ài)上 Laravel Elixir！

安裝與配置

安裝 Node

在開始使用 Elixir 之前，你必須先確定你的開發(fā)環(huán)境上有安裝 Node.js。

node -v

默認(rèn)情況下，Laravel Homestead 會(huì)包含你所需的一切；當(dāng)然，如果你沒(méi)有使用 Vagrant，那么你可以瀏覽 Node  的下載頁(yè)進(jìn)行安裝。別擔(dān)心，安裝是很簡(jiǎn)單又快速的！

Gulp

接著你需要全局安裝 Gulp 的 NPM 安裝包，如這樣：

npm install --global gulp

Laravel Elixir

最后的步驟就是安裝 Elixir！伴隨著新安裝的 Laravel，你會(huì)發(fā)現(xiàn)根目錄有個(gè)名為 package.json 的文件。想像它就如同你的 composer.json 文件，只是它定義的是 Node 的依賴，而不是 PHP。你可以使用以下的命令進(jìn)行安裝依賴的動(dòng)作：

npm install

使用方式

現(xiàn)在你已經(jīng)安裝好 Elixir，未來(lái)任何時(shí)候你都能進(jìn)行編譯及合并文件！ 在項(xiàng)目根目錄下的 gulpfile.js 已經(jīng)包含了所有的 Elixir 任務(wù)。

編譯 Less

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

在上述例子中，Elixir 會(huì)假設(shè)你的 Less 文件保存在 resources/assets/less 里。

編譯多個(gè) Less 文件

elixir(function(mix) {
    mix.less([
        'app.less',
        'something-else.less'
    ]);});

編譯 Sass

elixir(function(mix) {
    mix.sass("app.sass");});

在上述例子中，Elixir 會(huì)假設(shè)你的 Sass 文件保存在 resources/assets/sass 里。

默認(rèn)情況下， Elixir 會(huì)使用 LibSass 作為編譯引擎。 在某些情況下, 使用 Ruby 版本的 Sass 編譯可能更有優(yōu)勢(shì)，雖然運(yùn)行不是很快但是有更多的特性。假設(shè)你已經(jīng)安裝了 Ruby 和 Sass gem (gem install sass), 你可以使用 Ruby 模式，比如像這樣：

elixir(function(mix) {
    mix.rubySass("app.sass");});

無(wú) Source Maps 編譯

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

Source maps 默認(rèn)情況下是開啟的。因此, 每當(dāng)一個(gè)文件被編譯，你都會(huì)在當(dāng)前目錄下看到 *.css.map 文件。這個(gè)映射文件允許你在進(jìn)行 debugging 的時(shí)候，追溯編譯后的樣式選擇器到原有的 Sass 或者 Less 文件！如果你想要關(guān)閉這個(gè)功能，可以使用上面的代碼。

編譯 CoffeeScript

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

在上述例子中，Elixir 會(huì)假設(shè)你的 CoffeeScript 文件保存在 resources/assets/coffee 里。

編譯所有的 Less 及 CoffeeScript

elixir(function(mix) {
    mix.less()
       .coffee();});

觸發(fā) PHPUnit 測(cè)試

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

觸發(fā) PHPSpec 測(cè)試

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

合并樣式文件

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

傳遞給此方法的文件路徑均相對(duì)于 resources/asssets/css 目錄。

合并樣式文件且保存在自定義的路徑

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

從特定相對(duì)目錄合并樣式文件

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

styles 與 scrtips 方法可以通過(guò)傳入第三個(gè)參數(shù)來(lái)決定來(lái)源文件的相對(duì)目錄。

合并指定目錄里所有的樣式文件

elixir(function(mix) {
    mix.stylesIn("public/css");});

合并腳本文件

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

同樣的，傳遞給此方法的文件路徑均相對(duì)于 resources/assets/js 目錄

合并指定目錄里所有的腳本文件

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

合并多組腳本文件

elixir(function(mix) {
    mix.scripts(['jquery.js', 'main.js'], 'public/js/main.js')
       .scripts(['forum.js', 'threads.js'], 'public/js/forum.js');});

壓縮文件并加上哈希的版本號(hào)

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

這個(gè)動(dòng)作會(huì)為你的文件名稱加上獨(dú)特的哈希值，以防止文件被緩存。舉例來(lái)說(shuō)，產(chǎn)生出來(lái)的文件名稱可能像這樣：all-16d570a7.css。

接著在你的視圖中，你能夠使用 elixir() 函數(shù)來(lái)正確加載名稱被哈希后的文件。舉例如下：

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

程序的作用下，elixir() 函數(shù)會(huì)將參數(shù)內(nèi)的源文件名轉(zhuǎn)換成被哈希后的文件名并加載。是否有如釋重?fù)?dān)的感覺(jué)呢？

您也可以傳給一個(gè)數(shù)組給 version 方法來(lái)為多個(gè)文件進(jìn)行版本管理：

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

<link rel="stylesheet" href="{{ elixir("css/all.css") }}">
<script src="{{ elixir("js/app.js") }}"></script>

復(fù)制文件到新的位置

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

將整個(gè)目錄都復(fù)制到新的位置

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

Trigger Browserify

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

Want to require modules in the browser? Hoping to use EcmaScript 6 sooner than later? Need a built-in JSX transformer? If so, Browserify, along with the browserify Elixir task, will handle                the job nicely.

This task assumes that your scripts are stored in resources/assets/js, though you're free to override the default.

方法連接

當(dāng)然，你能夠串連 Elixir 大部份的方法來(lái)建立一連串的任務(wù)：

elixir(function(mix) {
    mix.less("app.less")
       .coffee()
       .phpUnit()
       .version("css/bootstrap.css");});

Gulp

現(xiàn)在你已經(jīng)告訴 Elixir 要執(zhí)行的任務(wù)，接著只需要在命令行執(zhí)行 Gulp。

執(zhí)行一次所有注冊(cè)的任務(wù)

gulp

監(jiān)控文件變更

gulp watch

僅編譯 javascript

gulp scripts

僅編譯 css 樣式

gulp styles

監(jiān)控測(cè)試以及 PHP 類的變更

gulp tdd

提示： 所有的任務(wù)都會(huì)使用開發(fā)環(huán)境進(jìn)行，所以壓縮功能不會(huì)被執(zhí)行。如果要使用上線環(huán)境，可以使用 gulp --production。

Custom Tasks and Extensions

Sometimes, you'll want to hook your own Gulp tasks into Elixir. Perhaps you have a special bit of functionality that you'd like Elixir to mix and watch for you. No problem!

As an example, imagine that you have a general task that simply speaks a bit of text when called.

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

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

Easy enough. From the command line, you may, of course, call gulp speak to trigger the task. To add it to Elixir, however, use the mix.task() method:

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

That's it! Now, each time you run Gulp, your custom "speak" task will be executed alongside any other Elixir tasks that you've mixed in. To additionally register a watcher, so that your custom tasks will be re-triggered each time                one or more files are modified, you may pass a regular expression as the second argument.

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

By adding this second argument, we've instructed Elixir to re-trigger the "speak" task each time a PHP file in the "app/" directory is saved.

For even more flexibility, you can create full Elixir extensions. Using the previous "speak" example, you may write an extension, like so:

var gulp = require("gulp");var shell = require("gulp-shell");var elixir = require("laravel-elixir");elixir.extend("speak", function(message) {

    gulp.task("speak", function() {
        gulp.src("").pipe(shell("say " + message));
    });

    return this.queueTask("speak");

 });

請(qǐng)注意我們 擴(kuò)增（ extend ） Elixir 的 API 時(shí)所使用的第一個(gè)參數(shù)，稍后我們需要在 Gulpfile 中使用它，以及建立 Gulp 任務(wù)所使用的回調(diào)函數(shù)。

如果你想要讓你的自定義任務(wù)能被監(jiān)控，只要在監(jiān)控器注冊(cè)就行了。

this.registerWatcher("speak", "app/**/*.php");

這行程序的意思是指，當(dāng)符合正則表達(dá)式 app/**/*.php 的文件一經(jīng)修改，就會(huì)觸發(fā) message 任務(wù)。

很好！接著你可以將這行程序?qū)懺?Gulpfile 的頂端，或者將它放到自定義任務(wù)的文件里。如果你選擇后者，那么你必須將它加載至你的 Gulpfile，例如：

require("./custom-tasks")

大功告成！最后你只需要將他們結(jié)合。

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

加入之后，每當(dāng)你觸發(fā) Gulp，Picard 就會(huì)要求一些茶。