A quoi sert mix dans Laravel

Dans Laravel, "laravel mix" est un outil de gestion d'automatisation des tâches frontales. Mix fournit une API simple et fluide qui peut définir des tâches de compilation Webpack pour les applications Laravel. Mix prend en charge de nombreux préprocesseurs CSS et JavaScript, qui peuvent être gérés en appelant. Ressources frontales.

L'environnement d'exploitation de cet article : système Windows 10, Laravel version 6, ordinateur Dell G3.

Quelle est l'utilisation de mix dans Laravel

Installer Laravel Mix

Laravel Mix est ​​un outil de gestion d'automatisation de tâches frontale qui utilise le modèle de workflow pour exécuter les tâches spécifiées dans l'ordre. Mix fournit une API simple et fluide qui vous permet de définir des tâches de compilation Webpack pour votre application Laravel. Mix prend en charge de nombreux préprocesseurs CSS et JavaScript courants, et vous pouvez facilement gérer les ressources frontales avec de simples appels.

Utiliser Mix est très simple. Tout d'abord, vous devez installer les dépendances npm à l'aide de la commande suivante. Nous utiliserons Yarn pour installer les dépendances :

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

Ajoutez SASS_BINARY_SITE=http://npm avant le fil. commande Le but de .taobao.org/mirrors/node-sass est de dire à Yarn de télécharger le fichier binaire node-sass à partir du miroir Taobao.

Utilisez Laravel Mix

pour modifier le fichier webpack.mix.js.

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

Ajoutez une version() à la fin pour ajouter un paramètre similaire au numéro de version après chaque fichier statique généré par Mix afin d'éviter la mise en cache du navigateur.

Modifiez le fichier resources/sass/app.scss

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

Exécutez npm run watch-poll, puis les fichiers css et js seront générés.

view appelle

// 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%;
}
……

version control

Mix et génère également le fichier public/mix-manifest.json, qui n'a pas besoin d'être ajouté au référentiel. Ajoutez-le dans .gitignore.

/public/js et /public/css sont générés dynamiquement, ils sont donc également ignorés.

Modifier ** .gitignore ** Fichier :

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

Recommandations associées :

Les cinq derniers didacticiels vidéo Laravel

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!