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

    npm install

使用方式

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

編譯 Less

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

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

編譯多個 Less 文件

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

編譯 Sass

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

在上述例子中，Elixir 會假設(shè)你的 Sass 文件保存在 resources/assets/sass 里。sass 方法只能被調(diào)用一次，如果你想編譯多個 Sass 文件，可以向 sass 方法傳入一個數(shù)組。

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

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

無 Source Maps 編譯

    elixir.config.sourcemaps = false;

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

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

編譯 CoffeeScript

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

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

編譯所有的 Less 及 CoffeeScript

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

觸發(fā) PHPUnit 測試

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

觸發(fā) PHPSpec 測試

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

合并樣式文件

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

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

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

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

從特定相對目錄合并樣式文件

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

styles 與 scrtips 方法可以通過傳入第三個參數(shù)來決定來源文件的相對目錄。

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

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

合并腳本文件

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

同樣的，傳遞給此方法的文件路徑均相對于 resources/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');
    });

壓縮文件并加上哈希的版本號

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

這個動作會為你的文件名稱加上獨特的哈希值，以防止文件被緩存。舉例來說，產(chǎn)生出來的文件名稱可能像這樣：all-16d570a7.css。

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

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

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

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

http://www.google-analytics.com/ga.js"> src="{{ elixir(" js="" app.js")="" }}"="">

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

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

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

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

方法連接

當(dāng)然，你能夠串連 Elixir 大部份的方法來建立一連串的任務(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í)行一次所有注冊的任務(wù)

    gulp

監(jiān)控文件變更

    gulp watch

僅編譯 javascript

    gulp scripts

僅編譯 css 樣式

    gulp styles

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

    gulp tdd

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

功能擴(kuò)充

你甚至能夠建立自己的 Gulp 任務(wù)至 Elixir 里。想像一下，你想加入一個有趣的任務(wù)，使用終端機(jī)后會打打印一些消息?？雌饋砜赡軙缦拢?/p>

     var gulp = require("gulp");
     var shell = require("gulp-shell");
     var elixir = require("laravel-elixir");

     elixir.extend("message", function(message) {

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

         return this.queueTask("say");

     });

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

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

    this.registerWatcher("message", "**/*.php");

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

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

    require("./custom-tasks")

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

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

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

上一篇：Hashing下一篇：開發(fā)