服務(wù) ―― Laravel Elixir

服務(wù) —— Laravel Elixir

1、簡介

Laravel?Elixir預(yù)處理器，甚至是測試工具。使用方法鏈，Elixir允許你平滑的定義資源管道。例如：

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

如果你曾經(jīng)對如何開始Gulp編譯感到困惑，那么你會愛上Laravel ?Elixir。然而，并不是強(qiáng)制要求在開發(fā)期間使用它。你可以自由選擇使用任何前端資源管道工具，或者壓根不使用。

2、安裝 & 設(shè)置

2.1 安裝Node

在開始Elixir之前，必須首先確保Node.js在機(jī)器上已經(jīng)安裝：

node -v

默認(rèn)情況下，Laravel Homestead包含你需要的一切；然而，如果你不使用Vagrant，你也可以通過訪問Node的下載頁面輕松的安裝Node。

2.2 Gulp

接下來，需要安裝Gulp作為全局NPM包：

npm install --global gulp

2.3 Laravel Elixir

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

npm install

如果你正在Windows系統(tǒng)上開發(fā)，需要在運(yùn)行npm install命令時帶上--no-bin-links：

npm install --no-bin-links

3、運(yùn)行Elixir

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

// Run all tasks...
gulp

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

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

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

gulp watch

4、處理CSS

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

4.1?Less

要將Less編譯成CSS，可以使用less方法。less方法假定你的Less文件都放在resources/assets/less。默認(rèn)情況下，本例中該任務(wù)會將編譯后的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'
    ]);
});

如果你想要自定義編譯后文件的輸出位置，可以傳遞第二個參數(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');
});

4.2?Sass

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

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

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

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

4.3 原生CSS

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

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

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

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

4.4 源地圖

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

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

elixir.config.sourcemaps = false;

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

5、處理JavaScript

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

5.1?CoffeeScript

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

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

5.2 Browserify

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

5.3 Babel

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

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

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

5.4 腳本

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

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

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

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

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

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

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

6、版本號刷新

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

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

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

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

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

6.1 給多個文件加上版本號

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

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

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

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

<script src="https://atts.w3cschool.cn/attachments/image/cimg/app.js') }}"></script>

7、調(diào)用存在的Gulp任務(wù)

如果你需要從Elixir調(diào)用已存在的Gulp任務(wù)，可以使用task方法。例如，假定你有一個調(diào)用時只是簡單說幾句話的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');
});

7.1 自定義監(jiān)控者

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

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

8、編寫Elixir擴(kuò)展

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

就是這樣簡單！注意你的特定Gulp邏輯應(yīng)該放到閉包函數(shù)里作為第二個參數(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');
});

8.1 自定義監(jiān)控器

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

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