Was ist die Verwendung von Mix in Laravel?

In Laravel ist „Laravel Mix“ ein Front-End-Tool zur Aufgabenautomatisierung. Mix bietet eine einfache und reibungslose API, mit der Webpack-Kompilierungsaufgaben für Laravel-Anwendungen definiert werden können. Mix unterstützt viele CSS- und JavaScript-Präprozessoren, die durch Aufrufe verwaltet werden können Front-End-Ressourcen.

Die Betriebsumgebung dieses Artikels: Windows 10-System, Laravel Version 6, Dell G3-Computer.

Was ist die Verwendung von Mix in Laravel?

Laravel-Mix installieren? Mix bietet eine einfache und reibungslose API, mit der Sie Webpack-Kompilierungsaufgaben für Ihre Laravel-Anwendung definieren können. Mix unterstützt viele gängige CSS- und JavaScript-Präprozessoren und Sie können Front-End-Ressourcen einfach mit einfachen Aufrufen verwalten.

Die Verwendung von Mix ist sehr einfach. Zuerst müssen Sie npm-Abhängigkeiten mit dem folgenden Befehl installieren. Zuvor müssen wir aus Gründen des inländischen Netzwerks auch die Installationsbeschleunigung für Yarn konfigurieren:

yarn config set registry https://registry.npm.taobao.org

Verwenden Sie Yarn, um Abhängigkeiten zu installieren:

SASS_BINARY_SITE=http://npm.taobao.org/mirrors/node-sass yarn

Fügen Sie SASS_BINARY_SITE=http://npm vor dem Garn hinzu Befehl Der Zweck von .taobao.org/mirrors/node-sass besteht darin, Yarn anzuweisen, die Node-Sass-Binärdatei vom Taobao-Spiegel herunterzuladen.

Verwenden Sie Laravel Mix

, um die Datei webpack.mix.js zu ändern.

const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .version();

Fügen Sie am Ende eine Version () hinzu, damit nach jeder von Mix generierten statischen Datei ein Parameter ähnlich der Versionsnummer hinzugefügt wird, um Browser-Caching zu vermeiden.

Ändern Sie die Datei resources/sass/app.scss

// Variables
@import 'variables';
// Bootstrap
@import '~bootstrap/scss/bootstrap';
/* universal */
body {
  font-family: Hiragino Sans GB, "Hiragino Sans GB", Helvetica, "Microsoft YaHei", Arial, sans-serif;
  font-size: 14px;
}
/* Sticky footer styles */
html {
  position: relative;
  min-height: 100%;
}
……

Führen Sie npm run watch-poll aus, dann werden CSS- und JS-Dateien generiert.

view ruft

<link href="{{ mix(&#39;css/app.css&#39;) }}" rel="stylesheet">

Versionskontrolle

Mix auf und generiert außerdem die Datei public/mix-manifest.json, die nicht zum Repository hinzugefügt werden muss.

/public/js und /public/css werden dynamisch generiert und daher ebenfalls ignoriert.

Ändern ** .gitignore ** Datei:

/public/mix-manifest.json
/public/js
/public/css

Verwandte Empfehlungen:

Die neuesten fünf Laravel-Video-Tutorials

Das obige ist der detaillierte Inhalt vonWas ist die Verwendung von Mix in Laravel?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!