So erstellen Sie einen Laravel CSS-Minify-Befehl

In diesem Artikel lernen Sie, wie Sie das Artisan -Befehlszeilenwerkzeug von Laravel verwenden und wie Sie einen individuellen Befehl erstellen. Beachten Sie, dass Sie mit dem Laravel -Framework vertraut sein müssen, um das Beste aus diesem Artikel zu erhalten.

Key Takeaways

• Nutzen Sie Laravel Artisan: Verwenden Sie das Artisan Command-Line-Tool von Laravel, um benutzerdefinierte Befehle für die CSS-Minifikation zu erstellen und die Effizienz der Workflow in Webentwicklungsprojekten zu verbessern.
• Benutzerdefinierte Befehlserstellung: Erstellen Sie einfach einen benutzerdefinierten Befehl mit `php artisan -Befehl: Make` Mit Optionen zum Benennen, Speichern und Namensort, sodass maßgeschneiderte Funktionen in Ihrer Laravel -Anwendung ermöglicht werden.
.
Minifikationsoptionen: Implementieren Sie Optionen in Ihrem Befehl, um die CSS -Dateiverkettung und die Erhaltung der Kommentare zu verarbeiten und Flexibilität basierend auf unterschiedlichen Entwicklungsbedürfnissen zu bieten.
Befehlsregistrierung: Stellen Sie sicher, dass Sie Ihren neuen Befehl im Artisan -System von Laravel registrieren, um es ausführbar zu machen, entweder über die Datei "artisan.php`
• Ausführung und Ausgabe: Verwenden Sie den Befehl, um CSS -Dateien mit optionalen Flags für die Verkettung und die Erhaltung von Kommentaren zu minimieren und die Befehlsfeedback mit informativen Nachrichten während des Ausführungsprozesses zu verbessern.

Was bauen wir

In diesem Tutorial werden wir einen Befehl zur Minimierung unseres CSS -Vermögens erstellen, das wie folgt verwendet wird:

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

• output_path: (erforderlich) Pfad zum Speichern der Minimified Dateien (style.css -> style.min.css).
• Datei1 ... Filen: (Erforderliche) Liste der zu minifikation zu minifikation.
• -Kommentare: (optional) Fügen Sie diese Option hinzu, um Kommentare zu führen.
• -concat: (optional) Verkettieren Sie die Minimified-Dateien in eine Datei mit dem Namen All.min.css.

Was ist ein Laravel -Befehl

Artisan ist der Name des Befehlszeilendienstprogramms in Laravel. Es wird mit einer Reihe vordefinierter Befehle geliefert, die Sie mit der Liste der PHP -Artisaner auflisten können. Wenn Sie die Hilfe für einen bestimmten Befehl anzeigen möchten, können Sie PHP Artisan Help -Befehl verwenden.

Erstellen des CSS Minifier -Befehls

Um einen handwerklichen Befehl zu erstellen, können Sie den Befehl verwenden: Befehl machen. Dieser Befehl akzeptiert ein Argument:

• Name: Der Klassenname für den Befehl.

und drei Optionen:

• -Befehl: Der Name, der getippt werden sollte, um den Befehl auszuführen.
• -Pfad: Standardmäßig werden die Befehle in dem Ordner app/commands gespeichert. Sie können dies jedoch mit dieser Option ändern.
• -Namespace: Mit dieser Option können Sie Ihren Befehlssatz namensspace verwenden, z. Im Befehlsbefehl: Machen Sie den Befehl make unter dem Befehlsnamenspace.

Um unseren Befehl zu erstellen, werden wir den Befehl PHP Artisan verwenden: Machen Sie CSSMincommand --Command = CSSmin, was eine CSSMincommand.php -Datei in unserem App/Command -Verzeichnis erstellt.

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

Unsere CSSMinand -Klasse erweitert die IlluminateConsolecommand und überschreibt zwei Methoden (getargumente, GetOptions).

• getArgumente: Diese Funktion gibt ein Array von Argumenten zurück, die an den Befehl übergeben werden sollten (z. B. die Liste der Dateien, die wir an den Befehl CSSmin übergeben).
GetOptions: Gibt eine Liste von Optionen oder Switches zurück, die Sie an den Befehl übergeben können. (z. B. -Comments).

HINWEIS: Optionen können Werte aufweisen oder nicht. -Komenten sind nur ein Flag, das true zurückgibt, wenn es an den Befehl übergeben wird, während --ouptput = 'public/assets' einen Wert zurückgibt.

Wenn Ihr Befehl ausgeführt wird, wird die Brandmethode aufgerufen. Hier müssen wir unsere Befehlslogik einsetzen.

Registrieren Sie den Befehl

Wenn Sie versuchen, unseren Befehl Php Artisan CSSmin 'Args' auszuführen, erhalten Sie einen Befehl "cssmin" nicht definiert.

Um einen Befehl zu registrieren, müssen Sie ihn der Artisan.php -Datei hinzufügen:

<span>use Illuminate<span>\Console\Command</span>;
</span><span>use Symfony<span>\Component\Console\Input\InputOption</span>;
</span><span>use Symfony<span>\Component\Console\Input\InputArgument</span>;
</span>
<span>class CssminCommand extends Command{
</span>    <span>protected $name = 'cssmin';
</span>    <span>protected $description = 'Command description.';
</span>    
    <span>public function __construct(){
</span>		<span><span>parent::</span>__construct();
</span>	<span>}
</span>    
    <span>public function fire(){
</span>		<span>//
</span>	<span>}
</span>	
	<span>protected function getArguments(){
</span>		<span>return array(
</span>			<span>array('example', InputArgument<span>::</span>REQUIRED, 'An example argument.'),
</span>		<span>);
</span>	<span>}
</span>    
	<span>protected function getOptions(){
</span>		<span>return array(
</span>			<span>array('example', null, InputOption<span>::</span>VALUE_OPTIONAL, 'An example option.', null),
</span>		<span>);
</span>	<span>}
</span><span>}</span>

Wenn Sie Ihre Befehle nicht in die Datei artisan.php einfügen möchten, können Sie eine separate Datei erstellen und einfügen. Wenn Sie ein Paket erstellen, können Sie diese in Ihrem Dienstanbieter registrieren.

Argumente

In unserer GetArguments -Methode definieren wir unsere Ausgabe und Dateien.

Um ein Argument zu definieren, müssen wir eine Reihe von Werten übergeben:

<span>Artisan<span>::</span>add( new CssMinCommand );
</span>
<span>//or through the container
</span><span>Artisan<span>::</span>add( App<span>::</span>make("CssMinCommand") );</span>

Name: Schlüsselname, der beim Abrufen von Argumenten verwendet werden soll.
• Modus: Kann eine der drei Optionen haben:
  InputArgument :: Erforderlich: Argument ist erforderlich.
  InputArgument :: Optional: Argument ist optional.
  inputArgument :: is_array: Argument akzeptiert mehrere Werte (z. B. Datei1 ... Filen).
  Sie können sie jedoch wie InputArgument :: is_array | kombinieren InputArgument :: Erforderlich (Argument ist erforderlich und muss ein Array sein).

Beschreibung: Nützlich beim Drucken der Befehlshilfe.
defaultValue: Wenn kein Argument vorgelegt wurde.

So wird unsere Getargument -Methode:

sein

<span>array( 'name', 'mode', 'description', 'defaultValue' )</span>

Hinweis: Bei Verwendung des Arguments von IS_Array sollte es das letzte für das zurückgegebene Argumentearray sein. (Offensichtlich).

Optionen

Unser CSSMin -Befehl hat nur zwei Optionen. Um eine Option zu definieren, übergeben wir ein Array:

<span>protected function getArguments(){
</span>        <span>return array(
</span>            <span>array(
</span>                <span>'output', 
</span>                <span>InputArgument<span>::</span>REQUIRED,
</span>                <span>'Path to output directory'
</span>            <span>),
</span>            <span>array(
</span>                <span>'files', 
</span>                <span>InputArgument<span>::</span>IS_ARRAY | InputArgument<span>::</span>OPTIONAL ,
</span>                <span>"List of css files to minify"
</span>            <span>),
</span>        <span>);
</span>    <span>}</span>

Name: Der Name Ihrer Option (Beispiel: Kommentare).
Verknüpfung: Eine kürzere Version Ihrer Option (z. B. --verbose und -v).
• Modus: Kann eine der vier Optionen sein (inputoption :: value_is_array, Inputoption :: value_optional, Inputoption :: Value_Required, Inputoption :: Value_None) sind die ersten drei Werte ähnlich wie die Argumente.
  VALUE_NONE: Zeigt an, dass die Option ein boolescher Flag ist (z. B. --verbose).
• Beschreibung: Nützlich beim Drucken der Befehlshilfe.

defaultValue: Wenn der Optionswert nicht bereitgestellt wurde.

Also ist unsere GetOptions -Methode:

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

Ausführen des Befehls

Wenn unsere Brandmethode aufgerufen wird, müssen wir unsere Argumente und Optionen sammeln. Wir können eine separate Funktion machen, um dies für uns zu tun:

<span>use Illuminate<span>\Console\Command</span>;
</span><span>use Symfony<span>\Component\Console\Input\InputOption</span>;
</span><span>use Symfony<span>\Component\Console\Input\InputArgument</span>;
</span>
<span>class CssminCommand extends Command{
</span>    <span>protected $name = 'cssmin';
</span>    <span>protected $description = 'Command description.';
</span>    
    <span>public function __construct(){
</span>		<span><span>parent::</span>__construct();
</span>	<span>}
</span>    
    <span>public function fire(){
</span>		<span>//
</span>	<span>}
</span>	
	<span>protected function getArguments(){
</span>		<span>return array(
</span>			<span>array('example', InputArgument<span>::</span>REQUIRED, 'An example argument.'),
</span>		<span>);
</span>	<span>}
</span>    
	<span>protected function getOptions(){
</span>		<span>return array(
</span>			<span>array('example', null, InputOption<span>::</span>VALUE_OPTIONAL, 'An example option.', null),
</span>		<span>);
</span>	<span>}
</span><span>}</span>

Das Argument und die Optionsmethoden nehmen einen Schlüssel als Argument an und geben den entsprechenden Wert zurück.

Um unser Beispiel sauber und einfach zu halten, verwenden wir diese einfache Funktion mit einer kleinen Änderung für den Minifikationsprozess.

<span>Artisan<span>::</span>add( new CssMinCommand );
</span>
<span>//or through the container
</span><span>Artisan<span>::</span>add( App<span>::</span>make("CssMinCommand") );</span>

Um unsere Argumente (Dateien) zu verarbeiten, werden wir eine separate Methode für den Job erstellen.

<span>array( 'name', 'mode', 'description', 'defaultValue' )</span>

Schließlich ruft unsere Brandmethode nur die beiden Methoden auf:

<span>protected function getArguments(){
</span>        <span>return array(
</span>            <span>array(
</span>                <span>'output', 
</span>                <span>InputArgument<span>::</span>REQUIRED,
</span>                <span>'Path to output directory'
</span>            <span>),
</span>            <span>array(
</span>                <span>'files', 
</span>                <span>InputArgument<span>::</span>IS_ARRAY | InputArgument<span>::</span>OPTIONAL ,
</span>                <span>"List of css files to minify"
</span>            <span>),
</span>        <span>);
</span>    <span>}</span>

Tipp: Sie können auch einen externen Befehl mit der Anrufmethode ausführen.

<span>array('name', 'shortcut', 'mode', 'description', 'defaultValue')</span>

Um unseren Befehl zu testen, werden wir einige CSS -Dateien in unser Public/CSS -Verzeichnis kopieren und dann den Befehl ausführen.

<span>protected function getOptions(){
</span>        <span>return array(
</span>            <span>array('comments', 'c', InputOption<span>::</span>VALUE_NONE, 'Don\'t strip comments' , null),
</span>            <span>array('concat', null, InputOption<span>::</span>VALUE_NONE, 'Concat the minified result to one file' , null),
</span>        <span>);
</span>    <span>}</span>

Der erste Befehl erstellt zwei Dateien (style.min.css, responsive.min.css) im Public/CSS -Verzeichnis.

Da wir die Flags -Comments und -concat verwendet haben, erhalten wir eine Datei namens All.min.css, die die beiden Dateien mit gelassenen Kommentaren enthält.

Unser Befehl ist nicht sehr beschreibend und gibt keine Nachrichten oder Benachrichtigungen an!

Verbesserung des Befehls

Bevor wir fortfahren, erstelle ich im endgültigen Github -Repository ein neues Tag für unseren Befehl, damit Sie jeden wechseln und testen können.

Um den Befehl ein wenig ausführlich zu machen, liefert uns Laravel einige Ausgangsfunktionen:

<span>private function init(){
</span>    <span>// retrun an array
</span>    <span>$this->files = $this->argument('files');
</span>    <span>// return a string
</span>    <span>$this->output_path = $this->argument('output');
</span>    <span>// return true if passed, otherwise false
</span>    <span>$this->comments = $this->option('comments');
</span>    <span>// return true if passed, otherwise false
</span>    <span>$this->concat = $this->option('concat');
</span><span>}</span>

Dies wird ausgegeben:

Neben dem Anzeigen von Nachrichten können Sie den Benutzer um Informationen bitten, z. B.

<span>private function minify( $css, $comments ){
</span>        <span>// Normalize whitespace
</span>        <span>$css = preg_replace( '/\s+/', ' ', $css );
</span>
        <span>// Remove comment blocks, everything between /* and */, unless preserved with /*! ... */
</span>        <span>if( !$comments ){
</span>            <span>$css = preg_replace( '/\/\*[^\!](.*?)\*\//', '', $css );
</span>        <span>}//if
</span>        
        <span>// Remove ; before }
</span>        <span>$css = preg_replace( '/;(?=\s*})/', '', $css );
</span>
        <span>// Remove space after , : ; { } */ >
</span>        <span>$css = preg_replace( '/(,|:|;|\{|}|\*\/|>) /', '', $css );
</span>
        <span>// Remove space before , ; { } ( ) >
</span>        <span>$css = preg_replace( '/ (,|;|\{|}|\(|\)|>)/', '', $css );
</span>
        <span>// Strips leading 0 on decimal values (converts 0.5px into .5px)
</span>        <span>$css = preg_replace( '/(:| )0\.([0-9]+)(%|em|ex|px|in|cm|mm|pt|pc)/i', '.', $css );
</span>
        <span>// Strips units if value is 0 (converts 0px to 0)
</span>        <span>$css = preg_replace( '/(:| )(\.?)0(%|em|ex|px|in|cm|mm|pt|pc)/i', '0', $css );
</span>
        <span>// Converts all zeros value into short-hand
</span>        <span>$css = preg_replace( '/0 0 0 0/', '0', $css );
</span>
        <span>// Shortern 6-character hex color codes to 3-character where possible
</span>        <span>$css = preg_replace( '/#([a-f0-9])\1([a-f0-9])\2([a-f0-9])\3/i', '#', $css );
</span>
        <span>return trim( $css );
</span>    <span>}//minify</span>

• Die Bestätigungsmethode nimmt zwei Argumente an, eine Fragenmeldung und einen Standardwert, wenn der Benutzer etwas anderes als y/n eingibt.

• Die Ask -Methode wird den Benutzer nach einer Eingabe anstelle von Y/N gefragt, und wenn sie leer bleibt, wird der Standardwert zurückgegeben.

• Die Auswahlmethode gibt dem Benutzer eine nummerierte Liste zur Auswahl, und wenn sie leer bleibt, wird der Standardwert zurückgegeben.

• Die geheime Methode fordert den Benutzer mit einer Frage auf und verbergt die Eingabe, aber die Benutzereingabe wird zurückgegeben.

In der Tat macht Laravel nur die Konsolen -API von Symfony einfacher und ausführlicher, und es gibt so viel mehr, wenn Sie eingraben möchten.

Machen wir unseren Befehl ausführlicher und halten Sie den Benutzer über die ausgeführten Aufgaben auf dem Laufenden.

<span>private function processFiles(){
</span>        <span>// array of minified css
</span>        <span>$css_result = [];
</span>        
        <span>foreach ( $this->files as $file ) {
</span>            <span>//read file content
</span>            <span>$file_content = file_get_contents( $file );
</span>            <span>//minify CSS and add it to the result array
</span>            <span>$css_result[] = $this->minify( $file_content, $this->comments );
</span>        <span>}//foreach
</span>        
        <span>// if the concat flag is true
</span>        <span>if( $this->concat ){
</span>            <span>// join the array of minified css
</span>            <span>$css_concat = implode( PHP_EOL, $css_result );
</span>            <span>// save to file
</span>            <span>file_put_contents($this->output_path . '/all.min.css', $css_concat);
</span>        <span>}//if
</span>        <span>else{
</span>            <span>foreach ($css_result as $key => $css) {
</span>                <span>//remove '.css' to add '.min.css'
</span>                <span>$filename = basename( $this->files[$key], '.css' ) . '.min.css';
</span>                <span>// save to file
</span>                <span>file_put_contents($this->output_path . '/' . $filename, $css);
</span>            <span>}//for
</span>        <span>}//else
</span>
    <span>}//processFiles</span>

Unsere Funktion druckt jetzt einige nützliche Nachrichten, um zu verfolgen, was los ist.

Hinweis: Dies wird als V2 unseres Befehls im Github -Repository markiert.

Beim Erstellen einer Anwendung werden wir es gewohnt, die Liste der verfügbaren Routen (PHP Artisan Routen) abzuwerfen.

Symfony bietet eine Funktion, mit der Sie eine solche Tabelle problemlos drucken können. Überprüfen Sie die Dokumentation für ein Beispiel. Als nächstes werden wir sehen, wie wir einige Symfony -Konsolenhelfer verwenden können.

Verwenden der Symfony Console Helpers

Um die Verwendung einiger Symfony -Helfer zu veranschaulichen, werden wir den Fortschrittshelfer verwenden, um den Benutzer über den Berufsfortschritt auf dem Laufenden zu halten.

Am Ende unserer Init -Methode benötigen wir einen Fortschritt von der Helperset und starten Sie dann unsere Fortschrittsleiste.

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

Die Startmethode akzeptiert zwei Argumente. Das zweite Argument ist die maximale Anzahl von Schritten.

Jedes Mal, wenn wir eine Datei in unserer ProcessFiles -Methode verarbeiten, werden wir die Fortschrittsleiste um einen Schritt vorantreiben. Wenn der Job erledigt ist, beenden wir die Fortschrittsleiste und drucken eine Benachrichtigungsnachricht.

<span>use Illuminate<span>\Console\Command</span>;
</span><span>use Symfony<span>\Component\Console\Input\InputOption</span>;
</span><span>use Symfony<span>\Component\Console\Input\InputArgument</span>;
</span>
<span>class CssminCommand extends Command{
</span>    <span>protected $name = 'cssmin';
</span>    <span>protected $description = 'Command description.';
</span>    
    <span>public function __construct(){
</span>		<span><span>parent::</span>__construct();
</span>	<span>}
</span>    
    <span>public function fire(){
</span>		<span>//
</span>	<span>}
</span>	
	<span>protected function getArguments(){
</span>		<span>return array(
</span>			<span>array('example', InputArgument<span>::</span>REQUIRED, 'An example argument.'),
</span>		<span>);
</span>	<span>}
</span>    
	<span>protected function getOptions(){
</span>		<span>return array(
</span>			<span>array('example', null, InputOption<span>::</span>VALUE_OPTIONAL, 'An example option.', null),
</span>		<span>);
</span>	<span>}
</span><span>}</span>

Sie können den Befehl mit mehreren Dateien ausprobieren oder die Sleep -Funktionslinie überzeugen, um einen Live -Effekt anzuzeigen.

Hinweis: Diese Version wird im endgültigen Repository als V3 markiert.

Schlussfolgerung

In diesem Artikel haben wir gelernt, wie Laravel -Befehle erstellen und erweitern. Laravel verfügt über viele integrierte Befehle, die Sie erkunden können, und Sie können auch unser endgültiges Repository auf GitHub überprüfen, um das Endergebnis zu testen. Fragen? Kommentare? Möchten Sie mehr Handwerksbefehls -Tutorials sehen? Lass es uns wissen!

häufig gestellte Fragen (FAQs) auf Laravel CSS Minify -Befehl

Was ist der Zweck des Minimierens von CSS in Laravel? Es geht darum, unnötige Zeichen wie Leerzeichen, Kommentare und Zeilenumbrüche aus den CSS -Dateien zu entfernen. Dieser Prozess reduziert die Größe der CSS -Dateien, was wiederum die Datenmenge reduziert, die an den Client übertragen werden müssen. Dies kann die Ladezeit Ihrer Website oder Anwendung erheblich verbessern und eine bessere Benutzererfahrung bieten.

Wie hilft Laravel Mix bei der CSS -Minifikation? API zum Definieren von Webpack -Build -Schritten für Ihre Laravel -Anwendung. Es unterstützt mehrere gemeinsame CSS- und JavaScript-Präzessoren, einschließlich der Minifikation. Durch die Verwendung von Laravel Mix können Sie Ihre CSS -Dateien mit einem einzigen Befehl problemlos minifieren, ohne unnötige Zeichen manuell entfernen zu müssen. Dies spart nicht nur Zeit, sondern stellt auch sicher, dass Ihre CSS -Dateien so optimiert wie möglich sind. Mischen. Es stehen mehrere Online -Tools und NPM -Pakete zur Verfügung, mit denen Sie Ihre CSS -Dateien minifieren können. Die Verwendung von Laravel -Mix wird jedoch empfohlen, da er nahtlos in Laravel integriert wird und eine einfache und bequeme Möglichkeit bietet, Ihre CSS -Dateien zu verwalten und zu optimieren.

Was sind die potenziellen Probleme, mit denen ich bei der Minimierung von CSS in Laravel ausgesetzt bin? Diese Fehler können dazu führen, dass der Minifikationsprozess fehlschlägt, was zu nicht optimierten CSS -Dateien führt. Daher ist es wichtig sicherzustellen In Laravel können Sie die Quellkarten von Laravel Mix verwenden, um sie zu debuggen. Quellkarten sind Dateien, die die minifizierten CSS -Dateien zu den ursprünglichen Quelldateien zurückzuordnen, sodass Sie Probleme einfach verfolgen und beheben können. Ja, Sie können den Prozess der CSS -Minifikation in Laravel mithilfe der Versioning -Funktion von Laravel Mix automatisieren. Diese Funktion mindert automatisch Ihre CSS -Dateien, wenn Sie den Befehl Produktionsbau ausführen. Dies stellt sicher, dass Ihre CSS -Dateien immer optimiert sind, ohne sie jedes Mal manuell minifieren zu müssen. Ihrer Laravel -Anwendung. Durch die Reduzierung der Größe Ihrer CSS -Dateien können Sie die Datenmenge reduzieren, die an den Client übertragen werden müssen. Dies kann zu schnelleren Ladezeiten führen und ein besseres Benutzererlebnis bieten. JavaScript -Dateien minifieren. Dies kann Ihre Laravel -Anwendung weiter optimieren und die Datenmenge reduzieren, die an den Client übertragen werden müssen. Unnötige Zeichen, um ihre Größe zu reduzieren, und bei der Verkettung von CSS -Dateien werden mehrere CSS -Dateien in eine einzelne Datei kombiniert. Beide Prozesse können dazu beitragen, Ihre Laravel -Anwendung zu optimieren, dienen jedoch unterschiedlichen Zwecken. Das Minimieren reduziert die Größe jeder einzelnen CSS -Datei, während die Verkettung die Anzahl der HTTP -Anforderungen reduziert, indem mehrere Dateien zu einem kombiniert werden. Um sicherzustellen, dass Ihre Minimified CSS -Dateien korrekt serviert werden, können Sie die Versionsversionsfunktion von Laravel Mix verwenden. Diese Funktion fügt einen eindeutigen Hash an die Dateinamen Ihrer minifizierten CSS -Dateien hinzu, um sicherzustellen, dass der Client immer die neueste Version Ihrer CSS -Dateien erhält.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen Laravel CSS-Minify-Befehl. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!