# 服務 —— Laravel Elixir ## 1、簡介 Laravel?Elixir預處理器，甚至是測試工具。使用方法鏈，Elixir允許你平滑的定義資源管道。例如： ~~~ elixir(function(mix) { mix.sass('app.scss') .coffee('app.coffee'); }); ~~~ 如果你曾經對如何開始Gulp編譯感到困惑，那么你會愛上Laravel ?Elixir。然而，并不是強制要求在開發期間使用它。你可以自由選擇使用任何前端資源管道工具，或者壓根不使用。 ## 2、安裝 & 設置 ### 2.1 安裝Node 在開始Elixir之前，必須首先確保Node.js在機器上已經安裝： ~~~ node -v ~~~ 默認情況下，Laravel Homestead包含你需要的一切；然而，如果你不使用Vagrant，你也可以通過訪問[Node的下載頁面](http://nodejs.org/download/)輕松的安裝Node。 ### 2.2 Gulp 接下來，需要安裝Gulp作為全局NPM包： ~~~ npm install --global gulp ~~~ ### 2.3 Laravel Elixir 最后，在新安裝的Laravel根目錄下，你會發現有一個`package.json`?文件。該文件和`composer.json`一樣，只不過是用來定義Node依賴而非PHP，你可以通過運行如下命令來安裝需要的依賴： ~~~ npm install ~~~ 如果你正在Windows系統上開發，需要在運行`npm install`命令時帶上`--no-bin-links`： ~~~ npm install --no-bin-links ~~~ ## 3、運行Elixir Elixir基于Gulp，所以要運行Elixir命令你只需要在終端中運行`gulp`命令即可。添加`--production`標識到命令將會最小化CSS和JavaScript文件： ~~~ // Run all tasks... gulp // Run all tasks and minify all CSS and JavaScript... gulp --production ~~~ ### 3.1 監控前端資源改變 由于每次修改前端資源后都要運行`gulp`很不方便，可以使用`gulp watch`命令。該命令將會一直在終端運行并監控前端文件的改動。當改變發生時，新文件將會自動被編譯： ~~~ gulp watch ~~~ ## 4、處理CSS 項目根目錄下的`gulpfile.js`文件包含了所有的Elixir任務。Elixir任務可以使用方法鏈的方式鏈接起來用于定義前端資源如何被編譯。 ### 4.1?Less 要將[Less](http://lesscss.org/)編譯成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'); }); ~~~ ### 4.2?Sass `sass`方法允許你將[Sass](http://sass-lang.com/)編譯成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'); }); ~~~ ### 4.3 原生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');}); ~~~ ### 4.4 源地圖 默認源地圖被啟用，所以，對于每一個你編譯過的文件都可以在同一目錄下找到一個對應的`*.css.map`文件。這種匹配允許你在瀏覽器中調試時將編譯過的樣式選擇器回溯到原來的Sass或Less。 如果你不想為CSS生成源地圖，可以使用一個簡單配置選項關閉它們： ~~~ elixir.config.sourcemaps = false; elixir(function(mix) { mix.sass('app.scss'); }); ~~~ ## 5、處理JavaScript Elixir還提供了多個函數幫助你處理JavaScript文件，例如編譯ECMAScript 6，CoffeeScript，Browserify，最小化以及簡單連接原生JavaScript文件。 ### 5.1?CoffeeScript `coffee`方法用于將[CoffeeScript](http://coffeescript.org/)編譯成原生JavaScript。該方法接收關聯到`resources/assets/coffee`目錄的CoffeeScript文件的一個字符串或數組并在`public/js`目錄下生成單個`app.js`文件： ~~~ elixir(function(mix) { mix.coffee(['app.coffee', 'controllers.coffee']); }); ~~~ ### 5.2 Browserify 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'); }); ~~~ ### 5.3 Babel `babel`方法可用于將[EcmaScript 6和7](https://babeljs.io/docs/learn-es2015/)編譯成原生JavaScript。該方法接收相對于`resources/assets/js`目錄的文件數組，并在`public/js`目錄下生成單個`all.js`： ~~~ elixir(function(mix) { mix.babel([ 'order.js', 'product.js' ]);}); ~~~ 要選擇不同的輸出路徑，只需將目標路徑作為第二個參數傳遞給該方法。處了Babel編譯之外，`babel`和`mix.scripts()`的使用方法和功能差不多。 ### 5.4 腳本 如果你有多個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'); }); ~~~ ## 6、版本號刷新 很多開發者會給編譯的前端資源添加時間戳或者唯一令牌后綴以強制瀏覽器加載最新版本而不是代碼的緩存副本。Elixir可以使用`version`方法為你處理這種情況。 `version`方法接收相對于`public`目錄的文件名，附加唯一hash到文件名，從而實現緩存刷新。例如，生成的文件名看上去是這樣——`all-16d570a7.css`： ~~~ elixir(function(mix) { mix.version('css/all.css'); }); ~~~ 生成版本文件后，可以在視圖中使用Elixir全局的PHP幫助函數`elixir`方法來加載相應的帶hash值的前端資源，`elixir`函數會自動判斷hash文件名： ~~~ <link rel="stylesheet" href="{{ elixir('css/all.css') }}"> ~~~ ### 6.1 給多個文件加上版本號 你可以傳遞一個數組到`version`方法來為多個文件添加版本號： ~~~ elixir(function(mix) { mix.version(['css/all.css', 'js/app.js']); }); ~~~ 一旦文件被加上版本號，就可以使用幫助函數`elixir`來生成指向該hash文件的鏈接。記住，你只需要傳遞沒有hash值的文件名到`elixir`方法。該幫助函數使用未加hash值的文件名來判斷文件當前的hash版本： ~~~ <link rel="stylesheet" href="{{ elixir('css/all.css') }}"> <script src="{{ elixir('js/app.js') }}"></script> ~~~ ## 7、調用存在的Gulp任務 如果你需要從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'); }); ~~~ ### 7.1 自定義監控者 如果你需要注冊一個監控器在每一次文件修改時都運行自定義任務，傳遞一個正則表達式作為`task`方法的第二個參數： ~~~ elixir(function(mix) { mix.task('speak', 'app/**/*.php');}); ~~~ ## 8、編寫Elixir擴展 如果你需要比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'); }); ~~~ ### 8.1 自定義監控器 如果你想要自定義任務在運行`gulp watch`的時候被觸發，可以注冊一個監控器： ~~~ new Task('speak', function() { return gulp.src('').pipe(shell('say ' + message)); }).watch('./app/**'); ~~~