Ressourcen kompilieren (Mix)

• Einführung
• Installation & Setup
• Ausführen Mix
• Stylesheet verwenden
  • Weniger
  • Sass
  • Stift
  • PostCSS
  • Einfach CSS
  • URL-Verarbeitung
  • Ressourcenzuordnung
• Verwendung JavaScript
  • Anbieterextraktion
  • Reagieren
  • Vanilla JS
  • Webpack anpassen Konfiguration
• Dateien und Verzeichnisse kopieren
• Versionskontrolle/Cache-Löschen
• Browsersync Neu laden
• Umgebungsvariablen
• Benachrichtigung

Einführung

Laravel Mix bietet eine API zum Definieren von Webpack-Erstellungsschritten für die Verwendung gängiger CSS- und JavaScript-Präprozessoren in Ihrer Anwendung. Durch die Verkettung von Aufrufen dieser prägnanten Methoden können Ressourcenpipelines fließend definiert werden. Zum Beispiel:

Wenn Sie verwirrt und überfordert sind, wie Sie mit Webpack und der Ressourcenkompilierung beginnen sollen, werden Sie Laravel Mix lieben. Sie müssen es jedoch nicht zum Entwickeln Ihrer Anwendung verwenden; Sie können jedes beliebige Ressourcen-Pipeline-Tool verwenden, oder auch gar keins.

Installation & Einrichtung

Knoten installieren

Trigger Mix Before Stellen Sie dabei sicher, dass Node.js und NPM auf dem Computer installiert sind.

node -v
npm -v

Standardmäßig enthält Laravel Homestead alles, was Sie brauchen. Wenn Sie jedoch Vagrant verwenden, können Sie auch die benutzerfreundlichere grafische Installation verwenden, die auf der Download-Seite verfügbar ist. Der Server installiert das neueste Versionen von Node und NPM.

Laravel Mix

Das Einzige, was noch übrig bleibt, ist, Laravel Mix zu installieren. Bei einer Neuinstallation von Laravel befindet sich die Datei package.json im Stammverzeichnis der Verzeichnisstruktur. Die Standarddatei package.json enthält alles, was Sie für den Einstieg benötigen. Betrachten Sie sie wie eine Datei composer.json, außer dass sie Abhängigkeiten für Node anstelle von PHP definiert. Installieren Sie die Abhängigkeiten, auf die es verweist, indem Sie den folgenden Befehl ausführen:

npm install

Run Mix

Mix ist die Top-Level-Konfiguration von Webpack. Um die Mix-Aufgabe auszuführen, müssen Sie also nur eine Zeile ausführen, die in Laravels Standard package.json enthalten ist Skript in der Datei:

// 运行 Mix 任务...
npm run dev
// 运行所有的 Mix 任务并最小化输出结果...
npm run production

Auf Ressourcenänderungen achten

npm run watch Der Befehl kann weiterhin im Terminal ausgeführt werden und Änderungen in zugehörigen Dateien überwachen. Webpack kompiliert die Ressourcen automatisch neu, sobald es Änderungen erkennt:

npm run watch

Sie werden feststellen, dass das Ändern von Dateien unter bestimmten Umständen Webpack nicht zur Aktualisierung auffordert. Wenn diese Situation in Ihrem System auftritt, sollten Sie den Befehl watch-poll verwenden:

npm run watch-poll

Verwenden Sie ein Stylesheet

webpack.mix.js Der Einstiegspunkt zum Kompilieren aller Ressourcen in der Datei. Betrachten Sie es als einen leichten Konfigurations-Wrapper für Webpack. Mischaufgaben können mit der Konfiguration der Ressourcenkompilierung verkettet werden. Die Methode

Less

less kann zum Kompilieren von Less in CSS verwendet werden . Die folgende Anweisung kompiliert die app.less-Datei in public/css/app.css:

mix.less('resources/less/app.less', 'public/css');

Die Kompilierung mehrerer Dateien kann durch mehrmaliges Aufrufen der less-Methode abgeschlossen werden:

mix.less('resources/less/app.less', 'public/css')   
    .less('resources/less/admin.less', 'public/css');

Wenn Sie Anpassungen vornehmen möchten Wenn Sie den Namen der kompilierten CSS-Datei angeben, können Sie den vollständigen Dateipfad als less übergeben Zweiter Parameter der Methode:

mix.less('resources/less/app.less', 'public/stylesheets/styles.css');

Wenn Sie die impliziten Less-Plugin-Optionen überschreiben müssen, können Sie ein Objekt als mix.less() übergeben Der dritte Parameter:

mix.less('resources/less/app.less', 'public/css', {
    strictMath: true
  });

Sass

sass Methode kann Sass Kompilieren konvertieren zu CSS. Sie können diese Methode wie folgt verwenden:

mix.sass('resources/sass/app.scss', 'public/css');

Ähnlich wie bei der less-Methode können Sie mehrere Sass-Dateien in ihre eigenen CSS-Dateien kompilieren und das Ausgabeverzeichnis für das resultierende CSS anpassen:

mix.sass('resources/sass/app.sass', 'public/css')  
 .sass('resources/sass/admin.sass', 'public/css/admin');

ExtraNode-Sass-Plugin-Optionen Kann als dritter Parameter verwendet werden:

mix.sass('resources/sass/app.sass', 'public/css', {
    precision: 5
  });

Stylus

Ähnlich wie bei Less und Sass, dem stylus Die Methode wird in Stylus kompiliert CSS:

mix.stylus('resources/stylus/app.styl', 'public/css');

Sie können auch zusätzliche Stylus-Plug-Ins installieren, wie zum Beispiel Rupture. Zuerst das Plugin über NPM installieren (npm install rupture), dann beim Aufruf von mix.stylus() einbinden:

mix.stylus('resources/stylus/app.styl', 'public/css', {  
  use: [       
   require('rupture')()  
   ]
 });

PostCSS

PostCSS ist ein leistungsstarkes Tool zum Konvertieren von CSS und in Laravel Mix enthalten. Standardmäßig hängt Mix mithilfe des beliebten Plugins Autoprefixer automatisch alle erforderlichen CSS3-Präfixe von Drittanbietern an. Es steht Ihnen jedoch frei, Ihrer App beliebige zusätzliche Plugins hinzuzufügen. Installieren Sie zunächst die erforderlichen Plugins über NPM und verweisen Sie dann in der webpack.mix.js-Datei darauf:

mix.sass('resources/sass/app.scss', 'public/css') 
   .options({
        postCss: [        
            require('postcss-css-variables')()    
              ] 
           });

Native CSS

Wenn Sie mehrere native CSS-Stylesheets in einer einzigen Datei kombinieren möchten, können Sie die Methode styles verwenden.

mix.styles([  
  'public/css/vendor/normalize.css',    
  'public/css/vendor/videojs.css'], 
  'public/css/all.css'
 );

URL-Verarbeitung

Da es auf Webpack basiert, ist es wichtig, mehrere Webpack-Konzepte zu verstehen. Für die CSS-Kompilierung schreibt Webpack alle url()-Aufrufe mit Stylesheets neu und optimiert sie. Auch wenn es zunächst seltsam klingt, handelt es sich tatsächlich um eine leistungsstarke Funktion. Stellen Sie sich vor, wir möchten Sass kompilieren, das bildrelative URLs enthält:

.example {
    background: url('../images/example.png');
 }

{note} Jeder an url() angegebene absolute Pfad wird von der URL-Umschreibung ausgeschlossen. Beispielsweise werden url('/images/thing.png') oder url('http://example.com/images/thing.png') nicht geändert.

Standardmäßig finden Laravel Mix und Webpack example.png, kopieren es in den Ordner public/images und überschreiben dann url() im generierten Stylesheet. Sobald dies erledigt ist, sieht das kompilierte CSS wie folgt aus:

.example {
    background: url(/images/example.png?d41d8cd98f00b204e9800998ecf8427e);
 }

Diese Funktion kann zwar nützlich sein, die vorhandene Ordnerstruktur ist jedoch möglicherweise bereits wie erwartet konfiguriert. In diesem Fall können Sie das url()-Umschreiben deaktivieren:

mix.sass('resources/app/app.scss', 'public/css') 
 .options({
      processCssUrls: false   
  });

Fügen Sie diese Konfiguration in der webpack.mix.js-Datei hinzu. Mix stimmt dann nicht mehr mit url() überein oder kopiert die Ressourcen in das öffentliche Verzeichnis. Mit anderen Worten, das kompilierte CSS sieht genauso aus wie das, was Sie ursprünglich eingegeben haben:

.example {
    background: url("../images/thing.png");
  }

Quellkarte

Obwohl Die Quellzuordnung ist standardmäßig deaktiviert. Sie kann durch Aufrufen der webpack.mix.js-Methode in der mix.sourceMaps()-Datei aktiviert werden. Obwohl es die Kosten für die Kompilierung/Ausführung erhöht, kann es den Browser-Entwicklungstools beim Kompilieren von Ressourcen zusätzliche Debugging-Informationen liefern.

mix.js('resources/js/app.js', 'public/js') 
  .sourceMaps();

Arbeiten mit JavaScript

Mix bietet mehrere Funktionen, die die Arbeit mit JavaScript-Dateien erleichtern, wie z. B. das Kompilieren von ECMAScript 2015, das Packen von Modulen sowie das Minimieren und Zusammenführen nativer JavaScript-Dateien. Noch besser: All dies funktioniert hervorragend, ohne dass eine Konfiguration erforderlich ist.

mix.js('resources/js/app.js', 'public/js');

Mit nur dieser Codezeile können Sie Folgendes unterstützen:

Anbieterextraktion

Bindet das anwendungseigene JavaScript und Bibliotheken von Drittanbietern dort ein ist ein potenzieller Nachteil: Es kann das langfristige Caching erschweren. Beispielsweise wird ein separates Update des Anwendungscodes den Browser dazu zwingen, alle Bibliotheken von Drittanbietern erneut herunterzuladen, auch wenn sich die Bibliotheken von Drittanbietern nicht geändert haben.

Wenn Sie planen, das JavaScript in Ihrer Anwendung häufig zu aktualisieren, sollten Sie darüber nachdenken, die Bibliothek eines Drittanbieters in eine eigene Datei zu extrahieren. Auf diese Weise wirken sich Änderungen am Anwendungscode nicht auf das vendor.js Datei-Caching aus. Die extract-Methode von Mix bietet hierfür Komfort: Die

mix.js('resources/js/app.js', 'public/js')  
 .extract(['vue'])

extract-Methode akzeptiert als Argument ein Array aller Bibliotheken oder Module, die Sie in vendor.js extrahieren möchten. Mithilfe des Codeausschnitts aus dem obigen Beispiel generiert Mix die folgenden Dateien:

Um JavaScript zu vermeiden Fehler, Sie sollten darauf achten, diese Dateien in der richtigen Reihenfolge zu laden:

<script src="/js/manifest.js"></script>
<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>

Reagieren

Mischen kann automatisch Installieren Sie alle React-Unterstützung. Erforderliches Babel-Plugin. Ersetzen Sie dazu einfach mix.react() durch mix.js():

mix.react('resources/js/app.jsx', 'public/js');

Mix lädt das entsprechende babel-preset-react Babel-Plugin herunter und bindet es im Hintergrund ein.

Vanilla JS

Ähnlich wie beim Einbinden von Stylesheets mit mix.styles() können Sie auch scripts() verwenden Methode Konsolidieren und minimieren Sie jede Menge JavaScript Datei:

mix.scripts([   
 'public/js/admin.js',    
 'public/js/dashboard.js'],
 'public/js/all.js'
 );

Diese Option ist besonders nützlich für Legacy-Code, für den kein JavaScript mit Webpack kompiliert werden muss.

{tip} mix.babel() ist eine kleine Variante von mix.scripts(). Seine Methodensignatur ist genau die gleiche wie scripts; die integrierte Datei wird jedoch von Babel kompiliert, das den ES2015-Code in Vanilla-JavaScript konvertiert, das der Browser versteht.

Benutzerdefinierte Webpack-Konfiguration

Lavarel Mix referenziert vorkonfigurierte webpack.config.js Dateien unter der Haube, um schneller einsatzbereit zu sein. Manchmal müssen Sie diese Datei möglicherweise manuell bearbeiten. Möglicherweise benötigen Sie einen speziellen Loader oder ein spezielles Plugin, auf das Sie verweisen müssen, oder Sie bevorzugen die Verwendung von Stylus anstelle von Sass. In diesem Fall haben Sie zwei Möglichkeiten:

Benutzerdefinierte Konfigurationen zusammenführen

Mix bietet eine webpackConfig-Methode zum Zusammenführen beliebiger kurzer Webpack-Konfigurationen, um die vorhandene zu überschreiben ist Konfiguration. Dies ist eine sehr attraktive Option, da Sie dafür keine eigene Kopie von webpack.config.js kopieren und pflegen müssen. Die webpackConfig-Methode akzeptiert als Argument ein Objekt, das eine beliebige Webpack-spezifische Konfiguration enthält, die Sie anwenden möchten,

mix.webpackConfig({
    resolve: {
        modules: [
            path.resolve(__dirname, 'vendor/laravel/spark/resources/assets/js')    
              ]  
          }
       }
    );

benutzerdefinierte Konfigurationsdatei

Wenn Sie Wenn Sie die Webpack-Konfiguration vollständig anpassen möchten, kopieren Sie die Datei node_modules/laravel-mix/setup/webpack.config.js in das Stammverzeichnis Ihres Projekts. Dann verweisen alle package.json-Verweise in der --config-Datei auf die neu kopierte Konfigurationsdatei. Wenn Sie Ihre Konfiguration auf diese Weise anpassen möchten, müssen alle nachfolgenden Aktualisierungen von Mix webpack.config.js manuell in Ihre benutzerdefinierte Konfigurationsdatei eingefügt werden.

Dateien und Verzeichnisse kopieren Mit der Methode

copy können Dateien und Verzeichnisse in ein neues kopiert werden Standort. Diese Methode ist nützlich, wenn spezielle Ressourcen im Verzeichnis node_modules in den Ordner public verschoben werden müssen.

mix.copy('node_modules/foo/bar.css', 'public/css/bar.css');

Beim Kopieren eines Ordners wird die Verzeichnisstruktur mit der Methode copy flacher. Um die ursprüngliche Struktur des Verzeichnisses beizubehalten, müssen Sie die Methode copyDirectory verwenden:

mix.copyDirectory('resources/img', 'public/img');

Versionsverwaltung / Cache-Busting

Viele Entwickler versehen ihre kompilierten Ressourcen mit einem Zeitstempel oder einem eindeutigen Token und zwingen so den Browser, die neue Ressource zu laden, um die alte Kopie des Codes zu ersetzen. Mix kann diese mit der version-Methode für Sie erledigen. Die .

version-Methode hängt automatisch einen eindeutigen Hash-Wert an alle kompilierten Dateinamen an, was eine bequemere Cache-Zerstörung ermöglicht:

mix.js('resources/js/app.js', 'public/js') 
  .version();

Nach dem Generieren der versionierten Datei wird Ihnen der genaue Dateiname nicht angezeigt bekannt sein. Daher müssen Sie die globale mix-Funktion von Laravel in Ansichten verwenden, um die entsprechende Hash-Ressource zu laden. mix Die Funktion ermittelt automatisch den aktuellen Dateinamen der Hash-Datei:

<script src="{{ mix('/js/app.js') }}"></script>

Normalerweise sind während der Entwicklungsphase keine versionierten Dateien erforderlich. Sie können die Versionierung nur durchführen, wenn Sie npm run production ausführen:

mix.js('resources/js/app.js', 'public/js');
if (mix.inProduction()) {
    mix.version();
   }

Browsersync Reload

BrowserSync kann Dateiänderungen automatisch erkennen und Änderungen in den Browser einfügen, ohne dass eine manuelle Aktualisierung erforderlich ist. Sie können die Methode mix.browserSync() aufrufen, um diese Unterstützung zu aktivieren:

mix.browserSync('my-domain.test');
// 或...
// https://browsersync.io/docs/options
mix.browserSync({
    proxy: 'my-domain.test'
  });

Sie können dieser Methode einen String (Proxy) oder ein Objekt Y (BrowserSync-Einstellungen) übergeben. Verwenden Sie dann den Befehl npm run watch, um den Entwicklungsserver von Webpack zu starten. Bearbeiten Sie das Skript oder die PHP-Datei erneut und Sie werden sehen, wie der Browser als Reaktion auf Ihre Änderungen sofort aktualisiert wird.

Umgebungsvariablen

Umgebungsvariablen können durch Hinzufügen des Präfixes .env zur Datei MIX_ eingefügt werden Zum Mischen:

MIX_SENTRY_DSN_PUBLIC=http://example.com

Sobald diese Variable in definiert ist .env-Datei, können Sie mit Hilfe des process.env-Objekts darauf zugreifen. Wenn sich dieser Wert während der Ausführung der watch-Aufgabe ändert, müssen Sie die Aufgabe neu starten:

process.env.MIX_SENTRY_DSN_PUBLIC

Benachrichtigung

Sofern verfügbar, zeigt Mix automatisch Betriebssystembenachrichtigungen für jede Bindung an. Dadurch erhalten Sie in Echtzeit eine Rückmeldung darüber, ob die Kompilierung erfolgreich war. Es kann jedoch Situationen geben, in denen Sie Benachrichtigungen deaktivieren möchten. Ein Beispiel ist das Auslösen von Mix auf einem Produktionsserver. Meldungen können mit Hilfe der disableNotifications-Methode gutgeschrieben werden.

mix.disableNotifications();