摘要：結果會被存放到拷貝文件目錄你可以使用方法拷貝文件目錄到新路徑，所有操作都相對于項目根目錄版本號緩存刷新很多開發者會給編譯的前端資源添加時間戳或者唯一令牌后綴以強制瀏覽器加載最新版本而不是代碼的緩存副本。

?如果你使用的是 Laravel 的 Homestead 環境，可以不用安裝了，已自帶。

?我們來查看下它們的版本：

$ node -v
$ npm -v

?如果沒有安裝，去 nodejs官網 下載安裝[ 傻瓜式 ]即可！

?nodejs 從 5.0 起就將 npm 打包下載了，所以不用手動再安裝 npm 了！

全局安裝：

$ npm install --global gulp-cli

查看版本：

$ gulp -v

傳送門： Gulp 官方文檔

在新安裝的 Laravel 根目錄下，你會發現有一個 package.json 文件。這個文件和 composer.json 一樣，只不過是用來定義 Node 依賴而非 PHP，你可以通過運行如下命令來安裝需要的依賴：

$ cd 你的 Laravel 項目的根目錄 

$ npm install

你將會看到，根目錄下多了一個 node_modules 目錄，這里就是這個命令依據 composer.son 來安裝的 node 的依賴包。其中就有 glup 和 laravel-elixir

方法一：使用 vpn

傳送門 ：點這里

方法二：使用國內鏡像 --- 淘寶的 cnpm

傳送門 ： 淘寶 NPM 鏡像

你可以使用淘寶定制的 cnpm (gzip 壓縮支持) 命令行工具代替默認的 npm:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

這樣，你就可以使用 cnpm 替代 npm 了

$ cnpm install [name]

備注下 這里 我遇到的一個問題：

使用 cnpm 速度起飛，但是不知道為什么 PhpStorm 卻卡住了 
求解釋！求解決之道！

以下內容源于： Laravel 學院
出處： http://laravelacademy.org/post/3137.html

Elixir 基于 Gulp，所以要運行 Elixir 命令你只需要在終端中運行 gulp 命令即可。添加 --production 標識到命令將會最小化 CSS 和 JavaScript 文件：

// Run all tasks...
gulp

// Run all tasks and minify all CSS and JavaScript...
gulp --production

監控前端資源改變

由于每次修改前端資源后都要運行 gulp 很不方便，可以使用 gulp watch 命令。該命令將會一直在終端運行并監控前端文件的改動。當改變發生時，新文件將會自動被編譯：

$ gulp watch

項目根目錄下的 gulpfile.js 文件包含了所有的 Elixir 任務。Elixir 任務可以使用方法鏈的方式鏈接起來用于定義前端資源如何被編譯。

要將 Less 編譯成 CSS，可以使用 less 方法。less 方法假定你的 Less 文件都放在 resources/assets/less。默認情況下，本例中該任務會將編譯后的 CSS 放到public/css/app.css：

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

你還可以將多個 Less 文件編譯成單個 CSS 文件。同樣，該文件會被放到 public/css/app.css：

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

如果你想要自定義編譯后文件的輸出位置，可以傳遞第二個參數到 less 方法：

elixir(function(mix) {
    mix.less("app.less", "public/stylesheets");
});

// Specifying a specific output filename...
elixir(function(mix) {
    mix.less("app.less", "public/stylesheets/style.css");
});

sass 方法允許你將 Sass 編譯成 CSS。假定你的 Sass 文件存放在resources/assets/sass，你可以像這樣使用該方法：

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

同樣，和 less 方法一樣，你可以將多個腳本編譯成單個 CSS 文件，甚至自定義結果 CSS 的輸出路徑：

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

如果你只想要將多個原生 CSS 樣式文件合并到一個文件，可以使用 styles 方法。傳遞給該方法的路徑相對于resources/assets/css 目錄，結果 CSS 被存放在 public/css/all.css：

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

當然，你還可以通過傳遞第二個參數到 styles 方法來輸出結果文件到一個自定義路徑：

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

默認源地圖被啟用，所以，對于每一個你編譯過的文件都可以在同一目錄下找到一個對應的 *.css.map 文件。這種匹配允許你在瀏覽器中調試時將編譯過的樣式選擇器回溯到原來的 Sass 或 Less。

如果你不想為 CSS 生成源地圖，可以使用一個簡單配置選項關閉它們：

elixir.config.sourcemaps = false;

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

Elixir 還提供了多個函數幫助你處理 JavaScript 文件，例如編譯 ECMAScript 6，CoffeeScript，Browserify，最小化以及簡單連接原生JavaScript文件。

coffee 方法用于將 CoffeeScript 編譯成原生 JavaScript。該方法接收關聯到 resources/assets/coffee 目錄的 CoffeeScript 文件的一個字符串或數組并在 public/js 目錄下生成單個 app.js 文件：

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

Elixir 還提供了 browserify 方法，從而讓你可以在瀏覽器中引入模塊并使用 EcmaScript 6。

該任務假定你的腳本都存放在 resources/assets/js 而且將結果文件存放到 public/js/bundle.js：

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

除了處理 Partialify 和 Babelify，還可以安裝并添加更多：

$ npm install vueify --save-dev

?

elixir.config.js.browserify.transformers.push({
    name: "vueify",
    options: {}
});

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

babel 方法可用于將EcmaScript 6和7編譯成原生JavaScript。該方法接收相對于 resources/assets/js 目錄的文件數組，并在 public/js 目錄下生成單個all.js：

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

要選擇不同的輸出路徑，只需將目標路徑作為第二個參數傳遞給該方法。處了 Babel 編譯之外，babel 和 mix.scripts()的使用方法和功能差不多。

如果你有多個 JavaScript 文件想要編譯成單個文件，可以使用 scripts 方法。

scripts 方法假定所有路徑相對于 resources/assets/js 目錄，而且所有結果 JavaScript 默認存放在public/js/all.js：

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

如果你需要將多個腳本集合合并到不同的文件，需要多次調用 scripts 方法。該方法的第二個參數決定每個合并的結果文件名：

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");
});

你可以使用 copy 方法拷貝文件/目錄到新路徑，所有操作都相對于項目根目錄：

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

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

很多開發者會給編譯的前端資源添加時間戳或者唯一令牌后綴以強制瀏覽器加載最新版本而不是代碼的緩存副本。Elixir 可以使用 version 方法為你處理這種情況。

version 方法接收相對于 public 目錄的文件名，附加唯一hash到文件名，從而實現緩存刷新。例如，生成的文件名看上去是這樣——all-16d570a7.css：

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

生成版本文件后，可以在視圖中使用 Elixir 全局的 PHP 幫助函數 elixir 方法來加載相應的帶hash值的前端資源，elixir 函數會自動判斷hash文件名：

給多個文件加上版本號

你可以傳遞一個數組到 version 方法來為多個文件添加版本號：

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

一旦文件被加上版本號，就可以使用幫助函數 elixir 來生成指向該hash文件的鏈接。記住，你只需要傳遞沒有hash值的文件名到elixir方法。該幫助函數使用未加hash值的文件名來判斷文件當前的hash版本：

BrowserSync 會在你修改前端資源后自動刷新瀏覽器，運行 gulp watch 命令時你可以使用 browserSync 方法告知Elixir 啟動一個 BrowserSync 服務器：

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

運行gulp watch后，使用 http://homestead.app:3000 訪問應用來開啟瀏覽器同步。如果你在本地開發中使用homestead.app之外的其它域名，可以傳遞域名參數到 browserSync 方法：

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

如果你需要從 Elixir 調用已存在的 Gulp 任務，可以使用 task 方法。例如，假定你有一個調用時只是簡單說幾句話的 Gulp 任務：

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

如果你想要從 Elixir 中調用該任務，使用 mix.task 方法并傳遞任務名作為該方法的唯一參數：

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

自定義監控者

如果你需要注冊一個監控器在每一次文件修改時都運行自定義任務，傳遞一個正則表達式作為 task 方法的第二個參數：

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

如果你需要比 Elixir 的 task 方法所提供的更加靈活的功能，可以創建自定義的 Elixir 擴展。Elixir 擴展允許你傳遞參數到自定義任務，例如，你可以像這樣編寫一個擴展：

// File: 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 構造器。你可以將其放在Gulpfile 頂端，或者將其解析到自定義的任務文件。例如，如果你將擴展放在 elixir-extensions.js，可以在主Gulpfile 中像這樣引入該文件：

// File: Gulpfile.js
var elixir = require("laravel-elixir");

require("./elixir-extensions")

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

如果你想要自定義任務在運行 gulp watch 的時候被觸發，可以注冊一個監控器：

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