目錄
" >安裝與設定
#安裝Node
" >Gulp
" >#Laravel Elixir
" >執行Elixir
Sass
纯 CSS
Source Maps
使用脚本
CoffeeScript
Browserify
Babel
Scripts
复制文件与目录
版本与缓存清除
为多个文件生成版本
BrowserSync
调用既有的 Gulp 任务
自定义监控器
编写 Elixir 扩展功能
首頁 php框架 Laravel laravel elixir是什麼

laravel elixir是什麼

Feb 14, 2022 pm 02:57 PM
elixir laravel

Laravel Elixir是一個API,該API整合了Gulp,為編譯Laravel專案中的Less、Sass、CoffeeScript以及處理許多其他日常任務提供了一個簡單的解決方案,從而減少編寫上述繁瑣任務的時間,有效提高程式效率。

laravel elixir是什麼

本教學操作環境:windows7系統、Laravel8.5版、Dell G3電腦。

Laravel的宗旨是讓PHP開發變得輕鬆愉悅,所以從Laravel 5開始,提供了一個新的被稱為LaravelElixir的API。此API整合了Gulp,為編譯Laravel專案中的Less、Sass、CoffeeScript以及處理許多其他日常任務提供了一個簡單的解決方案,從而減少編寫上述繁瑣任務的時間,有效提高程式效率。

Laravel Elixir 提供了簡潔流暢的 API,讓你能夠在你的 Laravel 應用程式中定義基本的 Gulp 任務。 Elixir 支援許多常見的 CSS 與 JavaScrtip 預處理器,甚至包含了測試工具。使用鍊式調用,Elixir 讓你流暢地定義開發流程,例如:

elixir(function(mix) {
    mix.sass('app.scss')
       .coffee('app.coffee');
});
登入後複製

如果你曾經對於上手Gulp 及編譯資源文件感到困惑,那麼你將會愛上Laravel Elixir ,不過Laravel 不會強迫你使用Elixir,你可以自由的選用你喜歡的自動化開發流程工具。

安裝與設定

#安裝Node

在開始使用Elixir 之前,你必須先確定你的機器上有安裝Node.js。

node -v
登入後複製

預設情況下,Laravel Homestead 會包含你所需的一切;但是,如果你沒有使用Vagrant,那麼你可以簡單的瀏覽Node 的下載頁面(http://nodejs.org/download/) 進行安裝。 【相關推薦:laravel影片教學

Gulp

##接著,你需要全域安裝Gulp(http: //gulpjs.com)的NPM 擴充包:

npm install --global gulp
登入後複製

#Laravel Elixir

最後的步驟就是安裝Elixir!在每一份新安裝的 Laravel 程式碼裡,你會發現根目錄有個名為 package.json 的檔案。想像它就像你的 composer.json 文件,只不過它定義的是 Node 的依賴擴充包,而不是 PHP 的。你可以使用以下的命令安裝依賴擴充包:

npm install
登入後複製

如果你是在Windows 系統上或在Windows 主機系統上執行VM 進行開發,你需要在執行npm install 指令時將--no-bin-links 開啟:

npm install --no-bin-links
登入後複製

執行Elixir

Elixir 是創建於Gulp 之上,所以要執行你的Elixir 任務,只需要在命令列執行gulp

命令。在指令增加

--production 標示會告知Elixir 壓縮你的CSS 及JavaScript 檔案:

監控資源檔案修改 因為每次修改你的資源檔案之後在命令列執行gulp 指令會相當不便,因此你可以使用gulp watch 指令。此命令會在你的命令列運行並監控資源檔案的任何修改。當修改發生時,新檔案將會自動被編譯:

gulp watch
登入後複製
使用樣式

#專案根目錄的
gulpfile. js
包含你所有的Elixir 任務。 Elixir 任務可以被鍊式呼叫起來,以定義你的資源檔案該如何進行編譯。

Less

#######要將 Less 編譯為 CSS,你可以使用 ###less### 方法。 ###less### 方法會假設你的 Less 檔案被保存在 ###resources/assets/less### 資料夾中。預設情況下,此範例的任務會將編譯後的CSS 放置在###public/css/app.css###:######
elixir(function(mix) {
    mix.less('app.less');
});
登入後複製
######你可能會想要合併多個Less 檔案至單一CSS 檔案。同樣的,產生的CSS 會被放置在###public/css/app.css###:######
elixir(function(mix) {
    mix.less([
        'app.less',
        'controllers.less'
    ]);
});
登入後複製
######如果你想自訂編譯後的CSS 輸出位置,可以將第二個參數傳遞至###less### 方法:######
elixir(function(mix) {
    mix.less('app.less', 'public/stylesheets');
});

// 指定输出的文件名称...
elixir(function(mix) {
    mix.less('app.less', 'public/stylesheets/style.css');
});
登入後複製
###

Sass

sass 方法让你能编译 Sass 至 CSS。Sass 文件的默认读取路径是 resources/assets/sass,你可以使用此方法:

elixir(function(mix) {
    mix.sass('app.scss');
});
登入後複製

同样的,如同 less 方法,你可以编译多个 Sass 文件至单个的 CSS 文件,甚至可以自定义生成的 CSS 的输出目录:

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

纯 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');
});
登入後複製

Source Maps

Source maps 在默认情况下是开启的。因此,针对每个被编译的文件,同目录内都会伴随着一个 *.css.map 文件。这个文件能够让你在浏览器调试时,可以追踪编译后的样式选择器至原始的 Sass 或 Less 位置。

如果你不想为你的 CSS 生成 source maps,你可以使用一个简单的配置选项关闭它们:

elixir.config.sourcemaps = false;

elixir(function(mix) {
    mix.sass('app.scss');
});
登入後複製

使用脚本

Elixir 也提供了一些函数来帮助你使用 JavaScript 文件,像是编译 ECMAScript 6、编译 CoffeeScript、Browserify、压缩、及简单的串联纯 JavaScript 文件。

CoffeeScript

coffee 方法可以用于编译 CoffeeScript 至纯 JavaScript。coffee 函数接收一个相对于 resources/assets/coffee 目录的 CoffeeScript 文件名字符串或数组,接着在 public/js 目录生成单个的 app.js 文件:

elixir(function(mix) {
    mix.coffee(['app.coffee', 'controllers.coffee']);
});
登入後複製

Browserify

Elixir 还附带了一个 browserify 方法,给予你在浏览器引入模块及 ECMAScript 6 的有用的特性。

此任务假设你的脚本都保存在 resources/assets/js,并会将生成的文件放置于 public/js/main.js

elixir(function(mix) {
    mix.browserify('main.js');
});
登入後複製

虽然 Browserify 附带了 Partialify 及 Babelify 转换器,但是只要你愿意,你可以随意安装并增加更多的转换器:

npm install aliasify --save-dev
登入後複製
elixir.config.js.browserify.transformers.push({
    name: 'aliasify',
    options: {}
});

elixir(function(mix) {
    mix.browserify('main.js');
});
登入後複製

Babel

babel 方法可被用于编译 ECMAScript 6 与 7 至纯 JavaScript。此函数接收一个相对于 resources/assets/js 目录的文件数组,接着在 public/js 目录生成单个的 all.js 文件:

elixir(function(mix) {
    mix.babel([
        'order.js',
        'product.js'
    ]);
});
登入後複製

若要选择不同的输出位置,只需简单的指定你希望的路径作为第二个参数。该方法除了 Babel 的编译外,特色与功能同等于 mix.scripts()

Scripts

如果你想将多个 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');
});
登入後複製

复制文件与目录

copy 方法可以复制文件与目录至新位置。所有操作路径都相对于项目的根目录:

elixir(function(mix) {
    mix.copy('vendor/foo/bar.css', 'public/css/bar.css');
});

elixir(function(mix) {
    mix.copy('vendor/package/views', 'resources/views');
});
登入後複製

版本与缓存清除

许多的开发者会在它们编译后的资源文件中加上时间戳或是唯一的 token,强迫浏览器加载全新的资源文件以取代提供的旧版本代码副本。你可以使用 version 方法让 Elixir 处理它们。

version 方法接收一个相对于 public 目录的文件名称,接着为你的文件名称加上唯一的哈希值,以防止文件被缓存。举例来说,生成出来的文件名称可能像这样:all-16d570a7.css

elixir(function(mix) {
    mix.version('css/all.css');
});
登入後複製

在为文件生成版本之后,你可以在你的 视图 中使用 Laravel 的全局 elixir PHP 辅助函数来正确加载名称被哈希后的文件。elixir 函数会自动判断被哈希的文件名称:

<link rel="stylesheet" href="{{ elixir(&#39;css/all.css&#39;) }}">
登入後複製

为多个文件生成版本

你可以传递一个数组至 version 方法来为多个文件生成版本:

elixir(function(mix) {
    mix.version([&#39;css/all.css&#39;, &#39;js/app.js&#39;]);
});
登入後複製

一旦该文件被加上版本,你需要使用 elixir 辅助函数来生成哈希文件的正确链接。切记,你只需要传递未哈希文件的名称至 elixir 辅助函数。此函数会自动使用未哈希的名称来判断该文件为目前的哈希版本:

<link rel="stylesheet" href="{{ elixir(&#39;css/all.css&#39;) }}">

登入後複製

BrowserSync

当你对前端资源进行修改后,BrowserSync 会自动刷新你的网页浏览器。你可以使用 browserSync 方法来告知 Elixir,当你运行 gulp watch 命令时启动 BrowserSync 服务器:

elixir(function(mix) {
    mix.browserSync();
});
登入後複製

一旦你运行 gulp watch,就能使用连接端口 3000 启用浏览器同步并访问你的网页应用程序:http://homestead.app:3000。如果你在本机开发所使用的域名不是 homestead.app,那么你可以传递一个 选项 的数组作为 browserSync 方法的第一个参数:

elixir(function(mix) {
    mix.browserSync({
        proxy: &#39;project.app&#39;    
    });
});
登入後複製

调用既有的 Gulp 任务

如果你需要在 Elixir 调用一个既有的 Gulp 任务,你可以使用 task 方法。举个例子,假设你有一个 Gulp 任务,当你调用时会输出一些简单的文本:

gulp.task(&#39;speak&#39;, function() {
    var message = &#39;Tea...Earl Grey...Hot&#39;;

    gulp.src(&#39;&#39;).pipe(shell(&#39;say &#39; + message));
});
登入後複製

如果你希望在 Elixir 中调用这个任务,使用 mix.task 方法并传递该任务的名称作为该方法唯一的参数:

elixir(function(mix) {
    mix.task(&#39;speak&#39;);
});
登入後複製

自定义监控器

如果你想注册一个监控器让你的自定义任务能在每次文件改变时就运行,只需传递一个正则表达式作为 task 方法的第二个参数:

elixir(function(mix) {
    mix.task(&#39;speak&#39;, &#39;app/**/*.php&#39;);
});
登入後複製

编写 Elixir 扩展功能

如果你需要比 Elixir 的 task 方法更灵活的方案,你可以创建自定义的 Elixir 扩展功能。Elixir 扩展功能允许你传递参数至你的自定义任务。举例来说,你可以编写一个扩展功能,像是:

// 文件:elixir-extensions.js

var gulp = require(&#39;gulp&#39;);
var shell = require(&#39;gulp-shell&#39;);
var Elixir = require(&#39;laravel-elixir&#39;);

var Task = Elixir.Task;

Elixir.extend(&#39;speak&#39;, function(message) {

    new Task(&#39;speak&#39;, function() {
        return gulp.src(&#39;&#39;).pipe(shell(&#39;say &#39; + message));
    });

});

// mix.speak(&#39;Hello World&#39;);
登入後複製

就是这样!注意,你的 Gulp 具体的逻辑必须被放置在 Task 第二个参数传递的构造器函数里面。你可以将此扩展功能放置在 Gulpfile 的上方,取而代之也可以导出至一个自定义任务的文件。举个例子,如果你将你的扩展功能放置在 elixir-extensions.js 文件中,那么你可以在 Gulpfile 中像这样引入该文件:

// 文件:Gulpfile.js

var elixir = require(&#39;laravel-elixir&#39;);

require(&#39;./elixir-extensions&#39;)

elixir(function(mix) {
    mix.speak(&#39;Tea, Earl Grey, Hot&#39;);
});
登入後複製

自定义监控器

如果你想在运行 gulp watch 时能够重新触发你的自定义任务,你可以注册一个监控器:

new Task(&#39;speak&#39;, function() {
    return gulp.src(&#39;&#39;).pipe(shell(&#39;say &#39; + message));
})
.watch(&#39;./app/**&#39;);
登入後複製

相关推荐:最新的五个Laravel视频教程

以上是laravel elixir是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1664
14
CakePHP 教程
1423
52
Laravel 教程
1321
25
PHP教程
1269
29
C# 教程
1249
24
laravel入門實例 laravel入門實例 Apr 18, 2025 pm 12:45 PM

Laravel 是一款 PHP 框架,用於輕鬆構建 Web 應用程序。它提供一系列強大的功能,包括:安裝: 使用 Composer 全局安裝 Laravel CLI,並在項目目錄中創建應用程序。路由: 在 routes/web.php 中定義 URL 和處理函數之間的關係。視圖: 在 resources/views 中創建視圖以呈現應用程序的界面。數據庫集成: 提供與 MySQL 等數據庫的開箱即用集成,並使用遷移來創建和修改表。模型和控制器: 模型表示數據庫實體,控制器處理 HTTP 請求。

解決 Craft CMS 中的緩存問題:使用 wiejeben/craft-laravel-mix 插件 解決 Craft CMS 中的緩存問題:使用 wiejeben/craft-laravel-mix 插件 Apr 18, 2025 am 09:24 AM

在使用CraftCMS開發網站時,常常會遇到資源文件緩存的問題,特別是當你頻繁更新CSS和JavaScript文件時,舊版本的文件可能仍然被瀏覽器緩存,導致用戶無法及時看到最新的更改。這個問題不僅影響用戶體驗,還會增加開發和調試的難度。最近,我在項目中遇到了類似的困擾,經過一番探索,我找到了wiejeben/craft-laravel-mix這個插件,它完美地解決了我的緩存問題。

Laravel如何學習 怎麼免費學習Laravel Laravel如何學習 怎麼免費學習Laravel Apr 18, 2025 pm 12:51 PM

想要學習 Laravel 框架,但苦於沒有資源或經濟壓力?本文為你提供了免費學習 Laravel 的途徑,教你如何利用網絡平台、文檔和社區論壇等資源,從入門到掌握,為你的 PHP 開發之旅奠定堅實基礎。

laravel用戶登錄功能 laravel用戶登錄功能 Apr 18, 2025 pm 12:48 PM

Laravel 提供了一個全面的 Auth 框架,用於實現用戶登錄功能,包括:定義用戶模型(Eloquent 模型)創建登錄表單(Blade 模板引擎)編寫登錄控制器(繼承 Auth\LoginController)驗證登錄請求(Auth::attempt)登錄成功後重定向(redirect)考慮安全因素:哈希密碼、防 CSRF 保護、速率限制和安全標頭。此外,Auth 框架還提供重置密碼、註冊和驗證電子郵件等功能。詳情請參閱 Laravel 文檔:https://laravel.com/doc

laravel框架安裝方法 laravel框架安裝方法 Apr 18, 2025 pm 12:54 PM

文章摘要:本文提供了詳細分步說明,指導讀者如何輕鬆安裝 Laravel 框架。 Laravel 是一個功能強大的 PHP 框架,它 упростил 和加快了 web 應用程序的開發過程。本教程涵蓋了從系統要求到配置數據庫和設置路由等各個方面的安裝過程。通過遵循這些步驟,讀者可以快速高效地為他們的 Laravel 項目打下堅實的基礎。

laravel怎麼查看版本號 laravel查看版本號方法 laravel怎麼查看版本號 laravel查看版本號方法 Apr 18, 2025 pm 01:00 PM

Laravel框架內置了多種方法來方便地查看其版本號,滿足開發者的不同需求。本文將探討這些方法,包括使用Composer命令行工具、訪問.env文件或通過PHP代碼獲取版本信息。這些方法對於維護和管理Laravel應用程序的版本控制至關重要。

laravel有哪些版本 laravel新手版本選擇方法 laravel有哪些版本 laravel新手版本選擇方法 Apr 18, 2025 pm 01:03 PM

在面向初学者的 Laravel 框架版本选择指南中,本文深入探討了 Laravel 的版本差異,旨在協助初學者在眾多版本之間做出明智的選擇。我們將重點介紹每個版本的關鍵特徵、比較它們的優缺點,並提供有用的建議,幫助新手根據他們的技能水準和項目需求挑選最合適的 Laravel 版本。對於初學者來說,選擇一個合適的 Laravel 版本至關重要,因為它可以顯著影響他們的學習曲線和整體開發體驗。

laravel和thinkphp的區別 laravel和thinkphp的區別 Apr 18, 2025 pm 01:09 PM

Laravel 和 ThinkPHP 都是流行的 PHP 框架,在開發中各有優缺點。本文將深入比較這兩者,重點介紹它們的架構、特性和性能差異,以幫助開發者根據其特定項目需求做出明智的選擇。

See all articles