Treffen Sie Elixir, die Laravel -Art, Vermögenswerte zu erstellen

optimieren Sie Ihren Laravel -Workflow mit Elixir: Eine umfassende Anleitung

Viele Webentwickler verwenden verschiedene Tools, um ihren Workflow zu verbessern und Lean -Codebasen zu pflegen. In den Bereichen Zusammenstellung wie CSS und JavaScript -Präprozessoren können jedoch manchmal den Prozess verlangsamt werden. Hier glänzen Task -Läufer wie Gulp und Elixir. In diesem Tutorial wird Elixir, ein von Jeffrey Way erstellter nutzerfreundlicher Node.js-Tool, das das Gulp-Task-Management vereinfacht, insbesondere innerhalb des Laravel-Frameworks, untersucht.

.

Dieser Leitfaden konzentriert sich auf die Vermögenszusammenstellung in Laravel, berührt aber auch die breitere Anwendbarkeit.

Schlüsselkonzepte:

Elixir optimiert die Vermögenszusammenstellung durch Wickeln von Gulp -Aufgaben in eine saubere Node.js -Schnittstelle.
• laravel-elixir Installation erfordert Node.js, Gulp und das
-Paket (über NPM).
Elixir verwendet Standardquellen- und Ausgabempfade, diese können jedoch über Methodenargumente oder ein Konfigurationsobjekt anpassbar sind.
integrierte Unterstützung beinhaltet CSS-Präprozessor-Kompilierung, JavaScript-Verarbeitung und Asset-Versioning.
benutzerdefinierte Aufgaben können einfach mit der API von Elixir erstellt werden und integriert sich nahtlos in die Blattvorlagen von Laravel.
Elixir automatisiert und rationalisiert den Workflow, unterstützt verschiedene CSS- und JavaScript -Präprozessoren, steigern Sie die Effizienz der Laravel -Entwicklung.

Voraussetzungen und Installation:

1. node.js:
Essentiell als Gulp läuft innerhalb von node.js. Homestead verbesserte Benutzer haben dies bereits.
2. gulp: npm install --global gulp elixir basiert auf Schlupf. Installieren Sie weltweit mit NPM:
(es sei denn, bereits über Homestead verbessert).
3. Laravel -Elixir: laravel-elixir Laravel -Projekte umfassen typischerweise package.json in npm install. Installieren Sie mit npm install laravel-elixir --save im Stammverzeichnis Ihres Projekts. Für Nicht-Laravel-Umgebungen:

Bevor Sie beginnen:

.less elixir übernimmt Quelldateien (.sass, .coffee, ./resources/assets/ usw.) in ./public/, mit Ausgabe von

standardmäßig.

File Type	Source Path	Output Path
Less	./resources/assets/less	./public/css
Sass	./resources/assets/sass	./public/css
CoffeeScript	./resources/assets/coffee	./public/js

Elixieraufgaben werden in Ihrem gulpfile.js mit der elixir -Funktion definiert, die einen Rückruf mit einem mix -Objekt abnimmt (bereitgestellt alle verfügbaren Methoden).

elixir(function(mix) {
  mix.less('styles.less');
});

Übergeben von Arrays oder Wildcards kompiliert und verkettet mehrere Dateien in app.css oder app.js. Einzelne Dateinamen führen zu identisch benannten Ausgabedateien. Diese Standardeinstellungen sind anpassbar.

Praktische Beispiele:

• weniger kompilieren:

elixir(function(mix) {
    mix.less("styles.less");
});

kompiliert resources/assets/less/styles.less zu public/css/styles.css. Die SASS -Kompilierung verwendet mix.sass(). Elixir verarbeitet die Präfixe der Verkäufer.

• Kaffeekript zusammenstellen:

elixir(function(mix) {
    mix.coffee(['controllers.coffee', 'services.coffee']);
});

kompiliert CoffeeScript -Dateien von resources/assets/coffee/ nach public/js/app.js.

Erweiterte Techniken:

• Mehrere Dateien: sass(), less(), coffee() Akzeptieren Sie einzelne Dateien, Wildcards, Arrays oder keine Argumente (für alle Dateien im Standardverzeichnis).

• benutzerdefinierte Quell-/Ausgangspfade:

  • Argumente: Ein zweites Argument gibt das Ausgabeverzeichnis an:

    elixir(function(mix) {
      mix.less(['file1.less', 'file2.less'], 'custom/path');
    });

  • Vollständige Pfade: Präfix mit ./, um Pfade relativ zum Projektroot anzugeben.

  • Konfigurationsobjekt: Die bevorzugte Methode ist das Modifizieren von css.output und js.output in Elixirs config Objekt (später diskutiert).

• Verkettung: Verwenden Sie scripts() für JavaScript und styles() für CSS. Diese akzeptieren Argumente für Quell- und Ausgangspfade, ähnlich wie Kompilierungsmethoden. scriptsIn() und stylesIn() verkettet alle Dateien in einem bestimmten Verzeichnis.

• Jade zu Klinge: erfordert laravel-elixir-jade (npm install laravel-elixir-jade@0.1.8 --save-dev). Die jade() -Methode kompiliert Jade zu Blattvorlagen.

• Dateiversioning: mix.version() findet einen Hash an Dateinamen an, wodurch Caching -Probleme verhindert werden. Verwenden Sie den elixir() Helfer in Blade -Vorlagen, um die versionierten Dateien zu verweisen.

• Konfiguration: Das Verhalten von Elixir wird über das config -Objekt in node_modules/laravel-elixir/Config.js gesteuert. Überschreiben Sie die Standardeinstellungen, indem Sie das Objekt elixir.config in gulpfile.js ändern oder eine elixir.json -Datei in Ihrem Projektroot erstellen.

• benutzerdefinierte Aufgaben: Die Funktionalität von Elixir erweitern Sie die Methode extend, um benutzerdefinierte Gulp -Aufgaben zu erstellen.

Ein reales Szenario (Laravel/Angular):

In diesem Abschnitt wird ein vollständiges Beispiel beschrieben, das die Fähigkeiten von Elixir in einem Laravel/Winkelprojekt demonstriert. Es deckt das Konfigurieren von Elixier, das Kompilieren von weniger und Coffeescript, das Zusammenstellen von Jade zu Blade und Versionsvermögen. Das komplette gulpfile.js wird vorhanden, das die Verkettung der Methode zeigt.

Auslaufaufgaben:

Ausführen gulp, um alle Elixieraufgaben auszuführen. gulp watch überwacht Dateien für Änderungen und führt die Aufgaben automatisch aus. Einzelne Aufgaben können ausgeführt werden (z. B. gulp less). Verwenden Sie gulp --production zur Minifikation.

Schlussfolgerung:

elixir vereinfacht das Gulp-Task-Management und bietet eine benutzerfreundliche Schnittstelle für gemeinsame Vermögenskompilierungsaufgaben. Seine Flexibilität, Anpassbarkeit und Integration in Laravel machen es zu einem wertvollen Instrument zur Straffung von Entwicklungsworkflows. Dieser Leitfaden bietet einen umfassenden Überblick, aber eine weitere Untersuchung der Dokumentation von Elixir wird für fortgeschrittene Funktionen gefördert.

Das obige ist der detaillierte Inhalt vonTreffen Sie Elixir, die Laravel -Art, Vermögenswerte zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!