Développement Laravel : Comment compiler CSS et JavaScript avec Laravel Mix ?-Laravel-php.cn

Développement Laravel : Comment compiler CSS et JavaScript avec Laravel Mix ?

PHPz

Libérer： 2023-06-14 13:53:19

original

1429 Les gens l'ont consulté

Laravel est un framework de développement PHP populaire qui peut aider les développeurs à créer rapidement des applications Web. Laravel Mix est un outil très utile qui peut aider les développeurs à compiler facilement du code CSS et JavaScript, tout en prenant également en charge diverses autres fonctions.

Cet article présentera les utilisations courantes de Laravel Mix et comment l'utiliser pour compiler CSS et JavaScript.

Installer Laravel Mix

Avant d'utiliser Laravel Mix, vous devez d'abord vous assurer que Laravel a été installé avec succès. S'il n'est pas encore installé, vous devez d'abord installer le framework Laravel. Ensuite, utilisez la commande suivante pour installer Laravel Mix :

npm install laravel-mix --save-dev

Copier après la connexion

Si vous devez faire en sorte que Laravel Mix prenne en charge Sass ou Less, vous devez également installer les packages npm de sass et less</ code> respectivement. Par exemple, la commande pour installer Sass est la suivante : <code>sass和less的npm包。例如，安装Sass的命令如下：

npm install sass --save-dev

Copier après la connexion

另外，Laravel Mix还依赖于一些其他的npm包，它们会在安装Laravel Mix时自动安装。

配置Laravel Mix

默认情况下，Laravel Mix会在webpack.mix.js文件中查找配置信息。可以使用mix.js()和mix.sass()等函数来编写Laravel Mix的配置。下面是一个简单的示例：

let mix = require('laravel-mix');

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

Copier après la connexion

以上代码告诉Laravel Mix将resources/js/app.js文件编译为public/js/app.js，将resources/sass/app.scss编译为public/css/app.css。需要注意的是，public/js和public/css文件夹需要提前创建好。

启动Laravel Mix

一旦完成了配置，就可以运行Laravel Mix来开始编译代码了。只需要在终端中运行以下命令：

npm run dev

Copier après la connexion

此命令会将所有的CSS和JavaScript文件编译为单个文件。编译完成后，可以在public/css和public/js

npm run watch

Copier après la connexion

De plus, Laravel Mix dépend également de certains autres packages npm, qui seront automatiquement installés lors de l'installation de Laravel Mix.

Configuration de Laravel Mix

Par défaut, Laravel Mix recherchera les informations de configuration dans le fichier webpack.mix.js. Vous pouvez utiliser des fonctions telles que mix.js() et mix.sass() pour écrire la configuration de Laravel Mix. Voici un exemple simple :

rrreee

Le code ci-dessus indique à Laravel Mix de compiler le fichier resources/js/app.js dans public/js/app.js, et resources/sass/app.scss est compilé en public/css/app.css. A noter que les dossiers public/js et public/css doivent être créés au préalable.

Démarrez Laravel Mix🎜🎜Une fois la configuration terminée, vous pouvez exécuter Laravel Mix pour commencer à compiler le code. Exécutez simplement la commande suivante dans le terminal : 🎜rrreee🎜 Cette commande compilera tous les fichiers CSS et JavaScript en un seul fichier. Une fois la compilation terminée, vous pouvez voir les fichiers générés dans les dossiers public/css et public/js. 🎜🎜Si vous devez exécuter Laravel Mix en mode débogage, vous pouvez exécuter la commande suivante : 🎜rrreee🎜Cette commande surveillera tous les fichiers CSS et JavaScript pour les modifications et recompilera automatiquement le code lors de l'enregistrement. 🎜🎜Conclusion🎜🎜Laravel Mix est un outil très pratique qui peut aider les développeurs à compiler facilement du code CSS et JavaScript, et prend également en charge une variété d'autres fonctions, telles que les tests automatisés, le contrôle de version et la synchronisation du navigateur. Il convient de noter qu'avant d'utiliser Laravel Mix, vous devez le configurer et le démarrer correctement pour obtenir l'effet de compilation attendu. 🎜

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!