如何創建Laravel CSS-Minify命令-php教程-PHP中文網

鑰匙要點

在Laravel中縮小CSS的目的是什麼？它涉及刪除不必要的字符，例如從CSS文件中的空格，評論和線路中斷。此過程減少了CSS文件的大小，這又減少了需要傳輸給客戶端的數據量。這可以顯著改善您的網站或應用程序的負載時間，提供更好的用戶體驗。

如果在CSS Minification期間遇到問題，我如何在CSS Minification in Laravel中的CSS Minification中調試問題？在Laravel中，您可以使用Laravel Mix的源地圖功能進行調試。源地圖是將縮小的CSS文件映射回原始源文件的文件，使您可以輕鬆地跟踪和解決任何問題。

css Minification可以顯著提高性能您的Laravel申請。通過減少CSS文件的大小，您可以減少需要傳輸到客戶端的數據量。這可能會導致加載時間更快，提供更好的用戶體驗。

>縮放和串聯CSS文件之間有什麼區別？不必要的字符降低大小，同時串聯CSS文件涉及將多個CSS文件組合到一個文件中。這兩個過程都可以幫助優化您的Laravel應用程序，但它們的目的不同。縮小縮小每個單獨的CSS文件的大小，同時通過將多個文件組合到一個。

首頁

後端開發

php教程

如何創建Laravel CSS-Minify命令

Joseph Gordon-Levitt

Feb 21, 2025 am 08:30 AM

如何創建Laravel CSS-Minify命令

>在本文中，您將學習如何使用Laravel的Artisan命令行工具以及如何創建自定義命令。請注意，您需要熟悉Laravel框架才能充分利用本文。

鑰匙要點

利用Laravel Artisan：利用Laravel的Artisan命令行工具為CSS Minification創建自定義命令，提高了Web開發項目的工作流效率。
>自定義命令創建：輕鬆地使用`php工匠命令：用命名，存儲和命名區的選項創建自定義命令，允許在Laravel應用程序中量身定制功能。
縮小選項：在您的命令中實現選項來處理CSS文件串聯和評論保存，提供了基於不同開發需求的靈活性。
命令註冊：確保在Laravel的Artisan系統中註冊您的新命令，以使其可執行，無論是通過'artisan.php`文件還是用於包裝開發的服務提供商。
執行和輸出：使用命令來縮小CSS文件，並具有可選的串聯和註釋保存標誌，並在執行過程中提高命令反饋。

我們在建造什麼

在本教程中，我們將構建一個命令來縮小我們的CSS資產，將其使用：

<span>cssmin 'output_path' 'file1'...'fileN' --comments --concat</span>

登入後複製

output_path ：（必需）保存縮小文件的路徑，（style.css-> style.min.css）。

file1 ... fileen ：（必需）要縮小的文件列表。
- 註釋：（可選）添加此選項以保持註釋。
- concat ：（可選）將縮小文件串成一個名為all.min.css的文件
什麼是laravel命令

創建CSS minifier命令

要創建一個工匠命令，您可以使用命令：make命令。此命令接受一個參數：

>名稱：命令的類名稱。

和三個選項：

- 路徑：默認情況下，命令存儲在應用程序/命令文件夾中，但是，您可以使用此選項更改該命令。

- 名稱空間：您可以使用此選項來命名您的一組命令，例如在命令命令中：make，make命令在命令名稱空間下。

>>>>>>>>>>
cssmin 'output_path' 'file1'...'fileN' --comments --concat
登入後複製
登入後複製
登入後複製
登入後複製
我們的cssmincommand類擴展了IlluminateConsolecommand並覆蓋兩種方法（getArguments，getOptions）。
>
- > getArguments：此功能返回應該傳遞給命令的一系列參數（例如：我們傳遞給CSSMIN命令的文件列表）。
注意：選項可能具有或可能沒有值， - comments只是一個標誌，如果將其傳遞給命令，則返回true，而-ouptput ='public/public/Assets'將返回一個值。
>
執行您的命令時，將調用火法，因此我們需要放置命令邏輯。

註冊命令

如果您嘗試運行我們的命令PHP Artisan cssmin'Args'您將獲得命令“ CSSMIN”。
要註冊一個命令，您需要將其添加到artisan.php文件：
>

>如果您不想將命令放入artisan.php文件中，則可以創建一個單獨的文件並包含它，或者如果您創建一個軟件包，則可以在服務提供商中註冊。
參數
在我們的getArguments方法中，我們將定義輸出和文件。
use Illuminate\Console\Command; use Symfony\Component\Console\Input\InputOption; use Symfony\Component\Console\Input\InputArgument; class CssminCommand extends Command{ protected $name = 'cssmin'; protected $description = 'Command description.'; public function __construct(){ parent::__construct(); } public function fire(){ // } protected function getArguments(){ return array( array('example', InputArgument::REQUIRED, 'An example argument.'), ); } protected function getOptions(){ return array( array('example', null, InputOption::VALUE_OPTIONAL, 'An example option.', null), ); } }
登入後複製
登入後複製
登入後複製
要定義一個參數，我們需要傳遞一系列值：
名稱：檢索參數時要使用的密鑰名稱。
>

模式：可以具有三個選項之一：
>
Artisan::add( new CssMinCommand ); //or through the container Artisan::add( App::make("CssMinCommand") );
登入後複製
登入後複製
- Inputargument ::可選：參數是可選的。
- inputargument :: is_array：參數接受多個值（ex：file1 ... fileen）。
 但是，您可以將它們結合起來，例如Inputargument :: iS_array | InputArgument ::必需（必需參數，必須是一個數組）。
 
 >
 >描述：打印命令幫助時有用。
 
 > defaultValue：如果未提供參數。
 >
 
 ，所以我們的getArguments方法將是：
 >
array( 'name', 'mode', 'description', 'defaultValue' )
登入後複製
登入後複製
>名稱：您選項的名稱（例如：註釋）。
>
快捷方式：您選項的較短版本（例如： - Verbose和-v）。
>

模式：可以是四個選項之一（inputoption :: value_is_array，inputoption :: value_optional，inputoption :: value_required，inputoption :: value_none），前三個值與參數相似。
protected function getArguments(){ return array( array( 'output', InputArgument::REQUIRED, 'Path to output directory' ), array( 'files', InputArgument::IS_ARRAY | InputArgument::OPTIONAL , "List of css files to minify" ), ); }
登入後複製
登入後複製
value_none：指示該選項是布爾旗（ex： - verbose）。
- 描述：在打印命令幫助時有用。
- >
- >
 
 ，所以我們的getOptions方法將是：
 >
 
 cssmin 'output_path' 'file1'...'fileN' --comments --concat
 登入後複製
 登入後複製
 登入後複製
 登入後複製
 
 >運行命令
 
 當我們的火法被稱為時，我們需要收集我們的論點和選擇。我們可以單獨的功能為我們做到這一點：
 >
 use Illuminate\Console\Command; use Symfony\Component\Console\Input\InputOption; use Symfony\Component\Console\Input\InputArgument; class CssminCommand extends Command{ protected $name = 'cssmin'; protected $description = 'Command description.'; public function __construct(){ parent::__construct(); } public function fire(){ // } protected function getArguments(){ return array( array('example', InputArgument::REQUIRED, 'An example argument.'), ); } protected function getOptions(){ return array( array('example', null, InputOption::VALUE_OPTIONAL, 'An example option.', null), ); } }
 登入後複製
 登入後複製
 登入後複製
 
 參數和選項方法以鍵作為參數並返回適當的值。 >
 為了保持我們的示例清潔和簡單，我們將使用此簡單功能和小的修改來進行縮小過程。
 
 Artisan::add( new CssMinCommand ); //or through the container Artisan::add( App::make("CssMinCommand") );
 登入後複製
 登入後複製
 現在要處理我們的參數（文件），我們將製作一個單獨的方法來完成這項工作。 >
 
 >最後，我們的火法只會調用這兩種方法：>
 array( 'name', 'mode', 'description', 'defaultValue' )
 登入後複製
 登入後複製
 
 提示：您也可以使用呼叫方法運行外部命令。 >
 
 protected function getArguments(){ return array( array( 'output', InputArgument::REQUIRED, 'Path to output directory' ), array( 'files', InputArgument::IS_ARRAY | InputArgument::OPTIONAL , "List of css files to minify" ), ); }
 登入後複製
 登入後複製
 要測試我們的命令，我們將將一些CSS文件複製到我們的public/css目錄中，然後運行命令。
 
 第一個命令將在public/css目錄上創建兩個文件（style.min.css，willsive.min.css）。
 array('name', 'shortcut', 'mode', 'description', 'defaultValue')
 登入後複製
 >
 因為我們使用了 - comments和 - concat標誌，所以我們將獲得一個名為all.min.css的文件，其中包含兩個文件，其中剩下的兩個文件。
 >
 protected function getOptions(){ return array( array('comments', 'c', InputOption::VALUE_NONE, 'Don\'t strip comments' , null), array('concat', null, InputOption::VALUE_NONE, 'Concat the minified result to one file' , null), ); }
 登入後複製
 我們的命令不是很描述性，也不提供任何消息或通知！
 >
 改進命令
 在我們繼續之前，在最終的github存儲庫之前，我將為我們的命令創建一個新標籤，以便您可以切換和測試每個標籤。
 使命令有點冗長，Laravel為我們提供了一些輸出功能：
 
 這將輸出：
 
 在僅顯示消息之外，您可以向用戶詢問信息，例如：>
 
 private function init(){ // retrun an array $this->files = $this->argument('files'); // return a string $this->output_path = $this->argument('output'); // return true if passed, otherwise false $this->comments = $this->option('comments'); // return true if passed, otherwise false $this->concat = $this->option('concat'); }
 登入後複製
 如果用戶類型與y/n。
 >
 詢問方法將向用戶詢問輸入，而不僅僅是y/n，如果將其留為空，則返回默認值。
 >選擇方法將為用戶提供一個編號列表以供您選擇，如果將其剩下，則返回默認值。
 >
 秘密方法將提示用戶提出問題並隱藏鍵入，但是將返回用戶輸入。
 
 private function minify( $css, $comments ){ // Normalize whitespace $css = preg_replace( '/\s+/', ' ', $css ); // Remove comment blocks, everything between /* and */, unless preserved with /*! ... */ if( !$comments ){ $css = preg_replace( '/\/\*[^\!](.*?)\*\//', '', $css ); }//if // Remove ; before } $css = preg_replace( '/;(?=\s*})/', '', $css ); // Remove space after , : ; { } */ > $css = preg_replace( '/(,|:|;|\{|}|\*\/|>) /', '', $css ); // Remove space before , ; { } ( ) > $css = preg_replace( '/ (,|;|\{|}|$|$|>)/', '', $css ); // Strips leading 0 on decimal values (converts 0.5px into .5px) $css = preg_replace( '/(:| )0\.([0-9]+)(%|em|ex|px|in|cm|mm|pt|pc)/i', '.', $css ); // Strips units if value is 0 (converts 0px to 0) $css = preg_replace( '/(:| )(\.?)0(%|em|ex|px|in|cm|mm|pt|pc)/i', '0', $css ); // Converts all zeros value into short-hand $css = preg_replace( '/0 0 0 0/', '0', $css ); // Shortern 6-character hex color codes to 3-character where possible $css = preg_replace( '/#([a-f0-9])\1([a-f0-9])\2([a-f0-9])\3/i', '#', $css ); return trim( $css ); }//minify
 登入後複製
 實際上，Laravel只是使Symfony的遊戲機API更簡單，更詳細，如果您想挖進去，還有更多。
 >
 >讓我們的命令更加詳細，並使用戶對執行的任務進行更新。 >
 
 我們的功能現在打印一些有用的消息，以跟踪正在發生的事情。 >
 
 注意：這將在GitHub存儲庫上標記為我們命令的V2。
 創建應用程序時，我們被用來傾倒可用路由的列表（PHP Artisan路線）。
 
 Symfony提供了一個函數，可讓您輕鬆打印這樣的桌子。檢查文檔中的示例。我們將看到接下來如何使用一些Symfony控制台助手。
 >
 使用Symfony Console Helper
 為了說明某些符號助手的使用，我們將使用進度助手來保持用戶有關工作進度的最新信息。
 在我們的初始方法結束時，我們將需要從助手那裡取得進度，然後開始我們的進度標準。
 
 啟動方法接受兩個參數，$ this->輸出是Symfony控制台中的consoleouput實例。第二個參數是最大步驟數。
 >
 
 cssmin 'output_path' 'file1'...'fileN' --comments --concat
 登入後複製
 登入後複製
 登入後複製
 登入後複製
 >每次我們在processFiles方法中處理文件時，我們都會將進度欄推進一步，當作業完成時，我們將結束進度欄並打印通知消息。
 
 >您可以嘗試使用多個文件的命令或刪除睡眠功能線以查看實時效果。
 
 use Illuminate\Console\Command; use Symfony\Component\Console\Input\InputOption; use Symfony\Component\Console\Input\InputArgument; class CssminCommand extends Command{ protected $name = 'cssmin'; protected $description = 'Command description.'; public function __construct(){ parent::__construct(); } public function fire(){ // } protected function getArguments(){ return array( array('example', InputArgument::REQUIRED, 'An example argument.'), ); } protected function getOptions(){ return array( array('example', null, InputOption::VALUE_OPTIONAL, 'An example option.', null), ); } }
 登入後複製
 登入後複製
 登入後複製
 
 注意：此版本將在最終存儲庫上標記為V3。
 結論在本文中，我們了解瞭如何創建和擴展Laravel命令。 Laravel有很多可以探索的內置命令，您還可以檢查我們在Github上的最終存儲庫以測試最終結果。問題？評論？您想查看更多工匠司令部教程嗎？讓我們知道！
 
 Laravel CSS Minify Command
 上的常見問題（常見問題解答）
 在Laravel中縮小CSS的目的是什麼？它涉及刪除不必要的字符，例如從CSS文件中的空格，評論和線路中斷。此過程減少了CSS文件的大小，這又減少了需要傳輸給客戶端的數據量。這可以顯著改善您的網站或應用程序的負載時間，提供更好的用戶體驗。
 
 > Laravel Mix如何幫助CSS Minification？
 
 Laravel Mix是一種功能強大的工具，可提供流利的工具用於定義WebPack的API為您的Laravel應用程序構建步驟。它支持幾個常見的CSS和JavaScript前處理器，包括縮小。通過使用Laravel Mix，您可以輕鬆地使用單個命令來縮小CSS文件，而無需手動刪除不必要的字符。這不僅節省了時間，而且還可以確保您的CSS文件盡可能優化。
 我可以在不使用laravel mix的情況下縮小CSS文件嗎？
 是的，您可以在不使用laravel的情況下縮小CSS文件混合。有幾種在線工具和NPM軟件包可以幫助您縮小CSS文件。但是，建議使用Laravel Mix，因為它與Laravel無縫集成，並提供了一種簡單便捷的方法來管理和優化您的CSS文件。
 >
 >在Laravel中縮小CSS時可能會遇到的潛在問題？
 
 > >在Laravel中縮小CSS通常是一個簡單的過程，如果您的CSS文件包含語法錯誤，您可能會遇到問題。這些錯誤會導致縮小過程失敗，從而導致不優化的CSS文件。因此，重要的是要確保您的CSS文件在嘗試縮小它們之前是無錯誤的。
 
 如果在CSS Minification期間遇到問題，我如何在CSS Minification in Laravel中的CSS Minification中調試問題？在Laravel中，您可以使用Laravel Mix的源地圖功能進行調試。源地圖是將縮小的CSS文件映射回原始源文件的文件，使您可以輕鬆地跟踪和解決任何問題。
 
 我可以在Laravel中自動化CSS Minification的過程？是的，您可以使用Laravel Mix的版本控制功能來自動化Laravel中CSS縮小的過程。每當您運行生產構建命令時，此功能都會自動減小CSS文件。這樣可以確保您的CSS文件始終得到優化，而無需每次手動縮小它們。
 
 > CSS Minification如何影響我的Laravel應用程序的性能？
 
 css Minification可以顯著提高性能您的Laravel申請。通過減少CSS文件的大小，您可以減少需要傳輸到客戶端的數據量。這可能會導致加載時間更快，提供更好的用戶體驗。
 
 >我可以使用Laravel Mix縮小其他類型的文件嗎？
 是的，除了CSS文件，也可以使用Laravel Mix縮小JavaScript文件。這可以進一步優化您的Laravel應用程序，減少需要將需要傳輸到客戶端的數據量。
 >縮放和串聯CSS文件之間有什麼區別？不必要的字符降低大小，同時串聯CSS文件涉及將多個CSS文件組合到一個文件中。這兩個過程都可以幫助優化您的Laravel應用程序，但它們的目的不同。縮小縮小每個單獨的CSS文件的大小，同時通過將多個文件組合到一個。
 
 >我如何確保如何正確提供我的CSS文件？為了確保正確提供了縮小的CSS文件，您可以使用Laravel Mix的版本操作功能。此功能將唯一的哈希附加到您縮小的CSS文件的文件名上，以確保客戶端始終接收您的CSS文件的最新版本。