Laravel之Elixir

一.Elixir安裝和設置

1.安裝node.js

2.安裝Gulp 做爲全局NPM 包

npm install --global gulp

　　

3.最後，在新安裝的Laravel 根目錄下，你會發現有一個package.json 文件。該文件和composer.json 同樣，只不過是用來定義Node 依賴而非PHP ，你能夠經過運行以下命令來安裝須要的依賴：

npm install

　　

windows下:

npm install --no-bin-links

 

4.按需配置根目錄下的gulpfile.js

 

二.經常使用命令　　

1.生成文件
gulp

2.最小化CSS 和JavaScript 文件
gulp --production

3.自動監控資源改變
gulp watch
gulp watch --production

　　

三.經常使用配置

1.若是你只想要將多個原生CSS 樣式文件合併到一個文件，能夠使用styles 方法。傳遞給該方法的路徑相對於resources/assets/css 目錄，結果CSS 被存放在public/css/all.css:

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

　　

2.還能夠經過傳遞第二個參數到styles 方法來輸出結果文件到一個自定義路徑

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

　　

3.若是你有多個JavaScript 文件想要編譯成單個文件，能夠使用 scripts 方法。 scripts 方法假定全部路徑相對於resources/assets/js 目錄，並且全部結果JavaScript 默認存放在public/js/all.js ：

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

　　

4.若是你須要將多個腳本集合合併到不一樣的文件，須要屢次調用scripts 方法。該方法的第二個參數決定每一個合併的結果文件名：

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

　　

5.若是你須要將多個腳本合併到給定目錄，能夠使用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');
});

　　

模板中使用

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

　　

*使用版本號生成的文件在/public/build目錄下

 

一個示例:

elixir(function(mix) {
    mix.styles(['a.css','b.css'], 'public/assets/css/style.css');
});

elixir(function(mix) {
    mix.scripts(['a.js','b.js'],'public/assets/js/main.js');
});

elixir(function(mix) {
    mix.version(['assets/css/style.css', 'assets/js/main.js']);
});

　　

以上也能夠使用方法鏈