Développement Laravel : Comment écrire du CSS et du JavaScript à l'aide de Laravel Mix ?

Développement Laravel : Comment écrire du CSS et du JavaScript à l'aide de Laravel Mix ?

Laravel Mix est un outil de construction intégré au framework Laravel. Il peut être utilisé pour écrire et empaqueter des ressources frontales telles que CSS, JavaScript et des images, ainsi que pour optimiser des fonctions telles que le chargement et la compilation automatiques, permettant aux développeurs de gérer et de créer des ressources frontales plus facilement.

Dans cet article, nous apprendrons étape par étape comment écrire du CSS et du JavaScript à l'aide de Laravel Mix.

Installer Laravel Mix

Avant de commencer à écrire du CSS et du JavaScript avec Laravel Mix, vous devez d'abord installer Laravel Mix dans votre projet Laravel. Vous pouvez utiliser la commande suivante :

npm install
npm install laravel-mix --save-dev

Cela installera Laravel Mix et ses dépendances.

Écrire du CSS

Laravel Mix offre de nombreuses façons pratiques d'écrire du CSS. Vous pouvez utiliser un compilateur CSS, tel que Sass ou Less, pour rendre votre CSS plus lisible. De plus, Laravel Mix fournit des méthodes utiles telles que l'ajout automatique de préfixes CSS et la compression et l'optimisation du CSS.

Ce qui suit est un exemple de code pour écrire du CSS à l'aide de Laravel Mix :

// 导入Laravel Mix
const mix = require('laravel-mix');
// 编译并打包CSS
mix.sass('resources/sass/app.scss', 'public/css')
// 自动添加CSS前缀
.options({
    postCss: [
        require('autoprefixer')({
            browsers: ['last 3 versions', 'iOS >= 8', 'Safari >= 8']
        })
    ]
})
// 压缩和优化CSS
.minify('public/css/app.css');

Dans le code ci-dessus, nous avons utilisé Sass pour écrire du CSS, l'avons compilé en CSS, puis l'avons empaqueté dans le répertoire public/css. Nous avons également utilisé des préfixes CSS ajoutés automatiquement pour garantir une apparence cohérente dans tous les navigateurs, et compressé et optimisé le CSS pour améliorer les vitesses de chargement des pages.

Écriture de JavaScript

Laravel Mix propose également de nombreuses façons pratiques d'écrire du JavaScript. Vous pouvez utiliser Babel pour transpiler du JavaScript ES6 ou supérieur afin de garantir que votre code s'exécute dans une variété de navigateurs. De plus, Laravel Mix fournit des méthodes utiles telles que la compression et l'optimisation de JavaScript.

Voici un exemple de code pour écrire du JavaScript à l'aide de Laravel Mix :

// 导入Laravel Mix
const mix = require('laravel-mix');
// 编译并打包JavaScript
mix.js('resources/js/app.js', 'public/js')
// 转换ES6或更高版本的JavaScript
.babel('public/js/app.js', 'public/js')
// 压缩和优化JavaScript
.minify('public/js/app.js');

Dans le code ci-dessus, nous avons utilisé Babel pour convertir le JavaScript ES6 ou supérieur et empaqueter le JavaScript compilé dans le répertoire public/js. Nous avons également compressé et optimisé JavaScript pour améliorer les vitesses de chargement des pages.

Résumé

Cet article explique comment écrire du CSS et du JavaScript à l'aide de Laravel Mix. Nous avons appris à écrire du CSS à l'aide de Sass, à convertir du JavaScript à l'aide de Babel et à préfixer, compresser et optimiser automatiquement CSS et JavaScript. Laravel Mix est un outil très puissant qui nous aide à gérer et à créer plus facilement des ressources frontales. Si vous développez avec Laravel, il est fortement recommandé d'utiliser Laravel Mix pour gérer et compiler les ressources frontales.

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!