目錄
" >安裝與設定
#安裝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

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

熱工具

記事本++7.3.1

記事本++7.3.1

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

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

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

Bangla 部分模型檢索中的 Laravel Eloquent ORM) Bangla 部分模型檢索中的 Laravel Eloquent ORM) Apr 08, 2025 pm 02:06 PM

LaravelEloquent模型檢索:輕鬆獲取數據庫數據EloquentORM提供了簡潔易懂的方式來操作數據庫。本文將詳細介紹各種Eloquent模型檢索技巧,助您高效地從數據庫中獲取數據。 1.獲取所有記錄使用all()方法可以獲取數據庫表中的所有記錄:useApp\Models\Post;$posts=Post::all();這將返回一個集合(Collection)。您可以使用foreach循環或其他集合方法訪問數據:foreach($postsas$post){echo$post->

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的地理空間:互動圖和大量數據的優化 Apr 08, 2025 pm 12:24 PM

利用地理空間技術高效處理700萬條記錄並創建交互式地圖本文探討如何使用Laravel和MySQL高效處理超過700萬條記錄,並將其轉換為可交互的地圖可視化。初始挑戰項目需求:利用MySQL數據庫中700萬條記錄,提取有價值的見解。許多人首先考慮編程語言,卻忽略了數據庫本身:它能否滿足需求?是否需要數據遷移或結構調整? MySQL能否承受如此大的數據負載?初步分析:需要確定關鍵過濾器和屬性。經過分析,發現僅少數屬性與解決方案相關。我們驗證了過濾器的可行性,並設置了一些限制來優化搜索。地圖搜索基於城

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和後端:為Web應用程序提供動力邏輯 Laravel和後端:為Web應用程序提供動力邏輯 Apr 11, 2025 am 11:29 AM

Laravel是如何在後端邏輯中發揮作用的?它通過路由系統、EloquentORM、認證與授權、事件與監聽器以及性能優化來簡化和增強後端開發。 1.路由系統允許定義URL結構和請求處理邏輯。 2.EloquentORM簡化數據庫交互。 3.認證與授權系統便於用戶管理。 4.事件與監聽器實現松耦合代碼結構。 5.性能優化通過緩存和隊列提高應用效率。

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

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

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

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

See all articles