Laravel Elixir 提供了簡潔流暢的 API,讓你能夠為你的 Laravel 應用程序定義基本的 Gulp 任務。Elixir 支持許多常見的 CSS 與 JavaScrtip 預處理器,甚至包含了測試工具。
如果你曾經(jīng)對于使用 Gulp 及編譯資源感到困惑,那么你絕對會愛上 Laravel Elixir!
在開始使用 Elixir 之前,你必須先確定你的開發(fā)環(huán)境上有安裝 Node.js。
node -v
默認情況下,Laravel Homestead 會包含你所需的一切;當然,如果你沒有使用 Vagrant,那么你可以瀏覽 Node 的下載頁進行安裝。別擔心,安裝是很簡單又快速的!
接著你需要全局安裝 Gulp 的 NPM 安裝包,如這樣:
npm install --global gulp
最后的步驟就是安裝 Elixir!伴隨著新安裝的 Laravel,你會發(fā)現(xiàn)根目錄有個名為 package.json
的文件。想像它就如同你的 composer.json
文件,只是它定義的是 Node 的依賴,而不是 PHP。你可以使用以下的命令進行安裝依賴的動作:
npm install
現(xiàn)在你已經(jīng)安裝好 Elixir,未來任何時候你都能進行編譯及合并文件! 在項目根目錄下的 gulpfile.js
已經(jīng)包含了所有的 Elixir 任務。
elixir(function(mix) {
mix.less("app.less");
});
在上述例子中,Elixir 會假設你的 Less 文件保存在 resources/assets/less
里。
elixir(function(mix) {
mix.less([
'app.less',
'something-else.less'
]);
});
elixir(function(mix) {
mix.sass("app.scss");
});
在上述例子中,Elixir 會假設你的 Sass 文件保存在 resources/assets/sass
里。sass
方法只能被調(diào)用一次,如果你想編譯多個 Sass 文件,可以向 sass
方法傳入一個數(shù)組。
默認情況下, Elixir 會使用 LibSass 作為編譯引擎。 在某些情況下, 使用 Ruby 版本的 Sass 編譯可能更有優(yōu)勢,雖然運行不是很快但是有更多的特性。假設你已經(jīng)安裝了 Ruby 和 Sass gem (gem install sass
), 你可以使用 Ruby 模式,比如像這樣:
elixir(function(mix) {
mix.rubySass("app.sass");
});
elixir.config.sourcemaps = false;
elixir(function(mix) {
mix.sass("app.scss");
});
Source maps 默認情況下是開啟的。因此, 每當一個文件被編譯,你都會在當前目錄下看到 *.css.map
文件。這個映射文件允許你在進行 debugging 的時候,追溯編譯后的樣式選擇器到原有的 Sass 或者 Less 文件!如果你想要關(guān)閉這個功能,可以使用上面的代碼。
elixir(function(mix) {
mix.coffee();
});
在上述例子中,Elixir 會假設你的 CoffeeScript 文件保存在 resources/assets/coffee
里。
elixir(function(mix) {
mix.less()
.coffee();
});
elixir(function(mix) {
mix.phpUnit();
});
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)換成被哈希后的文件名并加載。是否有如釋重擔的感覺呢?
您也可以傳給一個數(shù)組給 version
方法來為多個文件進行版本管理:
elixir(function(mix) {
mix.version(["css/all.css", "js/app.js"]);
});
http://www.google-analytics.com/ga.js"> src="{{ elixir(" js="" app.js")="" }}"="">
elixir(function(mix) {
mix.copy('vendor/foo/bar.css', 'public/css/bar.css');
});
elixir(function(mix) {
mix.copy('vendor/package/views', 'resources/views');
});
當然,你能夠串連 Elixir 大部份的方法來建立一連串的任務:
elixir(function(mix) {
mix.less("app.less")
.coffee()
.phpUnit()
.version("css/bootstrap.css");
});
現(xiàn)在你已經(jīng)告訴 Elixir 要執(zhí)行的任務,接著只需要在命令行執(zhí)行 Gulp。
gulp
gulp watch
gulp scripts
gulp styles
gulp tdd
提示: 所有的任務都會使用開發(fā)環(huán)境進行,所以壓縮功能不會被執(zhí)行。如果要使用上線環(huán)境,可以使用
gulp --production
。
你甚至能夠建立自己的 Gulp 任務至 Elixir 里。想像一下,你想加入一個有趣的任務,使用終端機后會打打印一些消息??雌饋砜赡軙缦拢?/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");
});
請注意我們 擴增( extend )
Elixir 的 API 時所使用的第一個參數(shù),稍后我們需要在 Gulpfile 中使用它,以及建立 Gulp 任務所使用的回調(diào)函數(shù)。
如果你想要讓你的自定義任務能被監(jiān)控,只要在監(jiān)控器注冊就行了。
this.registerWatcher("message", "**/*.php");
這行程序的意思是指,當符合正則表達式的文件一經(jīng)修改,就會觸發(fā) message
任務。
很好!接著你可以將這行程序?qū)懺?Gulpfile 的頂端,或者將它放到自定義任務的文件里。如果你選擇后者,那么你必須將它加載至你的 Gulpfile,例如:
require("./custom-tasks")
大功告成!最后你只需要將他們結(jié)合。
elixir(function(mix) {
mix.message("Tea, Earl Grey, Hot");
});
加入之后,每當你觸發(fā) Gulp,Picard 就會要求一些茶。