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

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

?我們來(lái)查看下它們的版本：

$ node -v
$ npm -v

?如果沒(méi)有安裝，去 nodejs官網(wǎng) 下載安裝[ 傻瓜式 ]即可！

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

全局安裝：

$ npm install --global gulp-cli

查看版本：

$ gulp -v

傳送門： Gulp 官方文檔

在新安裝的 Laravel 根目錄下，你會(huì)發(fā)現(xiàn)有一個(gè) package.json 文件。這個(gè)文件和 composer.json 一樣，只不過(guò)是用來(lái)定義 Node 依賴而非 PHP，你可以通過(guò)運(yùn)行如下命令來(lái)安裝需要的依賴：

$ cd 你的 Laravel 項(xiàng)目的根目錄 

$ npm install

你將會(huì)看到，根目錄下多了一個(gè) node_modules 目錄，這里就是這個(gè)命令依據(jù) composer.son 來(lái)安裝的 node 的依賴包。其中就有 glup 和 laravel-elixir

方法一：使用 vpn

傳送門 ：點(diǎn)這里

方法二：使用國(guó)內(nèi)鏡像 --- 淘寶的 cnpm

傳送門 ： 淘寶 NPM 鏡像

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

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

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

$ cnpm install [name]

備注下 這里 我遇到的一個(gè)問(wèn)題：

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

以下內(nèi)容源于： Laravel 學(xué)院
出處： http://laravelacademy.org/post/3137.html

Elixir 基于 Gulp，所以要運(yùn)行 Elixir 命令你只需要在終端中運(yùn)行 gulp 命令即可。添加 --production 標(biāo)識(shí)到命令將會(huì)最小化 CSS 和 JavaScript 文件：

// Run all tasks...
gulp

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

監(jiān)控前端資源改變

由于每次修改前端資源后都要運(yùn)行 gulp 很不方便，可以使用 gulp watch 命令。該命令將會(huì)一直在終端運(yùn)行并監(jiān)控前端文件的改動(dòng)。當(dāng)改變發(fā)生時(shí)，新文件將會(huì)自動(dòng)被編譯：

$ gulp watch

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

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

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

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

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

如果你想要自定義編譯后文件的輸出位置，可以傳遞第二個(gè)參數(shù)到 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 方法一樣，你可以將多個(gè)腳本編譯成單個(gè) CSS 文件，甚至自定義結(jié)果 CSS 的輸出路徑：

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

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

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

當(dāng)然，你還可以通過(guò)傳遞第二個(gè)參數(shù)到 styles 方法來(lái)輸出結(jié)果文件到一個(gè)自定義路徑：

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

默認(rèn)源地圖被啟用，所以，對(duì)于每一個(gè)你編譯過(guò)的文件都可以在同一目錄下找到一個(gè)對(duì)應(yīng)的 *.css.map 文件。這種匹配允許你在瀏覽器中調(diào)試時(shí)將編譯過(guò)的樣式選擇器回溯到原來(lái)的 Sass 或 Less。

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

elixir.config.sourcemaps = false;

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

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

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

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

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

該任務(wù)假定你的腳本都存放在 resources/assets/js 而且將結(jié)果文件存放到 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。該方法接收相對(duì)于 resources/assets/js 目錄的文件數(shù)組，并在 public/js 目錄下生成單個(gè)all.js：

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

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

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

scripts 方法假定所有路徑相對(duì)于 resources/assets/js 目錄，而且所有結(jié)果 JavaScript 默認(rèn)存放在public/js/all.js：

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

如果你需要將多個(gè)腳本集合合并到不同的文件，需要多次調(diào)用 scripts 方法。該方法的第二個(gè)參數(shù)決定每個(gè)合并的結(jié)果文件名：

elixir(function(mix) {
    mix.scripts(["app.js", "controllers.js"], "public/js/app.js")
       .scripts(["forum.js", "threads.js"], "public/js/forum.js");
});

如果你需要將多個(gè)腳本合并到給定目錄，可以使用 scriptsIn 方法。結(jié)果 JavaScript 會(huì)被存放到 public/js/all.js：

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

你可以使用 copy 方法拷貝文件/目錄到新路徑，所有操作都相對(duì)于項(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ā)者會(huì)給編譯的前端資源添加時(shí)間戳或者唯一令牌后綴以強(qiáng)制瀏覽器加載最新版本而不是代碼的緩存副本。Elixir 可以使用 version 方法為你處理這種情況。

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

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

生成版本文件后，可以在視圖中使用 Elixir 全局的 PHP 幫助函數(shù) elixir 方法來(lái)加載相應(yīng)的帶hash值的前端資源，elixir 函數(shù)會(huì)自動(dòng)判斷hash文件名：

給多個(gè)文件加上版本號(hào)

你可以傳遞一個(gè)數(shù)組到 version 方法來(lái)為多個(gè)文件添加版本號(hào)：

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

一旦文件被加上版本號(hào)，就可以使用幫助函數(shù) elixir 來(lái)生成指向該hash文件的鏈接。記住，你只需要傳遞沒(méi)有hash值的文件名到elixir方法。該幫助函數(shù)使用未加hash值的文件名來(lái)判斷文件當(dāng)前的hash版本：

BrowserSync 會(huì)在你修改前端資源后自動(dòng)刷新瀏覽器，運(yùn)行 gulp watch 命令時(shí)你可以使用 browserSync 方法告知Elixir 啟動(dòng)一個(gè) BrowserSync 服務(wù)器：

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

運(yùn)行gulp watch后，使用 http://homestead.app:3000 訪問(wèn)應(yīng)用來(lái)開啟瀏覽器同步。如果你在本地開發(fā)中使用homestead.app之外的其它域名，可以傳遞域名參數(shù)到 browserSync 方法：

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

如果你需要從 Elixir 調(diào)用已存在的 Gulp 任務(wù)，可以使用 task 方法。例如，假定你有一個(gè)調(diào)用時(shí)只是簡(jiǎn)單說(shuō)幾句話的 Gulp 任務(wù)：

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

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

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

自定義監(jiān)控者

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

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

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

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

就是這樣簡(jiǎn)單！注意你的特定Gulp邏輯應(yīng)該放到閉包函數(shù)里作為第二個(gè)參數(shù)傳遞給 Task 構(gòu)造器。你可以將其放在Gulpfile 頂端，或者將其解析到自定義的任務(wù)文件。例如，如果你將擴(kuò)展放在 elixir-extensions.js，可以在主Gulpfile 中像這樣引入該文件：

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

require("./elixir-extensions")

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

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

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