W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
現(xiàn)在你已經(jīng)安裝好 Elixir,未來任何時(shí)候你都能進(jìn)行編譯及合并文件! 在項(xiàng)目根目錄下的 gulpfile.js 已經(jīng)包含了所有的 Elixir 任務(wù)。
elixir(function(mix) {
mix.less("app.less");
});
在上述例子中,Elixir 會(huì)假設(shè)你的 Less 文件保存在 resources/assets/less 里。
elixir(function(mix) {
mix.less([
'app.less',
'something-else.less'
]);
});
elixir(function(mix) {
mix.sass("app.sass");
});
在上述例子中,Elixir 會(huì)假設(shè)你的 Sass 文件保存在 resources/assets/sass 里。
默認(rèn)情況下, Elixir 會(huì)使用 LibSass 作為編譯引擎。 在某些情況下, 使用 Ruby 版本的 Sass 編譯可能更有優(yōu)勢(shì),雖然運(yùn)行不是很快但是有更多的特性。假設(shè)你已經(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 默認(rèn)情況下是開啟的。因此, 每當(dāng)一個(gè)文件被編譯,你都會(huì)在當(dāng)前目錄下看到 *.css.map 文件。這個(gè)映射文件允許你在進(jìn)行 debugging 的時(shí)候,追溯編譯后的樣式選擇器到原有的 Sass 或者 Less 文件!如果你想要關(guān)閉這個(gè)功能,可以使用上面的代碼。
elixir(function(mix) {
mix.coffee();
});
在上述例子中,Elixir 會(huì)假設(shè)你的 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"
]);
});
傳遞給此方法的文件路徑均相對(duì)于 resources/css 目錄。
elixir(function(mix) {
mix.styles([
"normalize.css",
"main.css"
], 'public/build/css/everything.css');
});
從特定相對(duì)目錄合并樣式文件
elixir(function(mix) {
mix.styles([
"normalize.css",
"main.css"
], 'public/build/css/everything.css', 'public/css');
});
styles 與 scrtips 方法可以通過傳入第三個(gè)參數(shù)來決定來源文件的相對(duì)目錄。
elixir(function(mix) {
mix.stylesIn("public/css");
});
elixir(function(mix) {
mix.scripts([
"jquery.js",
"app.js"
]);
});
同樣的,傳遞給此方法的文件路徑均相對(duì)于 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");
});
這個(gè)動(dòng)作會(huì)為你的文件名稱加上獨(dú)特的哈希值,以防止文件被緩存。舉例來說,產(chǎn)生出來的文件名稱可能像這樣:all-16d570a7.css。
接著在你的視圖中,你能夠使用 elixir() 函數(shù)來正確加載名稱被哈希后的文件。舉例如下:
<link rel="stylesheet" href="{{ elixir("css/all.css") }}">
程序的作用下,elixir() 函數(shù)會(huì)將參數(shù)內(nèi)的源文件名轉(zhuǎn)換成被哈希后的文件名并加載。是否有如釋重?fù)?dān)的感覺呢?
您也可以傳給一個(gè)數(shù)組給 version 方法來為多個(gè)文件進(jìn)行版本管理:
elixir(function(mix) {
mix.version(["css/all.css", "js/app.js"]);
});
<link rel="stylesheet" href="{{ elixir("css/all.css") }}">
<script src="https://atts.w3cschool.cn/attachments/image/cimg/app.js") }}"></script>
elixir(function(mix) {
mix.copy('vendor/foo/bar.css', 'public/css/bar.css');
});
elixir(function(mix) {
mix.copy('vendor/package/views', 'resources/views');
});
Trigger Browserify
elixir(function(mix) {
mix.browserify('index.js');
});
Want to require modules in the browser? Hoping to use EcmaScript 6 sooner than later? Need a built-in JSX transformer? If so, Browserify, along with the browserify Elixir task, will handle the job nicely.
This task assumes that your scripts are stored in resources/js, though you're free to override the default.
當(dāng)然,你能夠串連 Elixir 大部份的方法來建立一連串的任務(wù):
elixir(function(mix) {
mix.less("app.less")
.coffee()
.phpUnit()
.version("css/bootstrap.css");
});
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: