Rencontrez Elixir, la façon de Laravel de compiler les actifs

rationalisez votre flux de travail Laravel avec Elixir: un guide complet

De nombreux développeurs Web utilisent divers outils pour améliorer leur flux de travail et maintenir des bases de code Lean. Cependant, les outils nécessitant une compilation, tels que CSS et les préprocesseurs JavaScript, peuvent parfois ralentir le processus. C'est là que les coureurs de tâches comme Gulp et Elixir brillent. Ce didacticiel explore Elixir, un outil Node.js convivial nœud.js construit par Jeffrey Way, conçu pour simplifier la gestion des tâches Gulp, en particulier dans le cadre de Laravel.

Ce guide se concentre sur la compilation des actifs dans Laravel, mais aborde également son applicabilité plus large.

Concepts clés:

• Elixir Streamlines Asset Compilation en enveloppant les tâches Gulp dans une interface Node.js propre.
• L'installation nécessite Node.js, Gulp et le package laravel-elixir (via NPM).
• Elixir utilise des chemins de source et de sortie par défaut, mais ceux-ci sont personnalisables via des arguments de méthode ou un objet de configuration.
• La prise en charge intégrée comprend la compilation du préprocesseur CSS, le traitement JavaScript et les versioning d'actifs.
• Les tâches personnalisées sont facilement créées à l'aide de l'API d'Elixir, et il s'intègre parfaitement aux modèles de lame de Laravel.
• Elixir automatise et rationalise le flux de travail, prenant en charge diverses prérocesseurs CSS et JavaScript, augmentant l'efficacité de développement de Laravel.

Prérequis et installation:

1. node.js: Essential lorsque Gulp s'exécute dans Node.js. Les utilisateurs améliorés Homestead ont déjà ceci.
2. Gulp: Elixir s'appuie sur Gulp. Installez globalement à l'aide de NPM: npm install --global gulp (sauf si déjà installé via Homestead amélioré).
3. Laravel Elixir: Les projets Laravel incluent généralement laravel-elixir dans package.json. Installez en utilisant npm install dans le répertoire racine de votre projet. Pour les environnements non laravels: npm install laravel-elixir --save

avant de commencer:

Elixir suppose que les fichiers source (.less, .sass, .coffee, etc.) résident dans ./resources/assets/, avec sortie à ./public/ par défaut.

File Type	Source Path	Output Path
Less	./resources/assets/less	./public/css
Sass	./resources/assets/sass	./public/css
CoffeeScript	./resources/assets/coffee	./public/js

Les tâches d'élixir sont définies dans votre fonction gulpfile.js en utilisant la fonction elixir, qui prend un rappel avec un objet mix (fournissant toutes les méthodes disponibles).

elixir(function(mix) {
  mix.less('styles.less');
});

Les tableaux de passage ou les caractères génériques se compilent et concatène plusieurs fichiers dans app.css ou app.js. Les noms de fichiers uniques entraînent des fichiers de sortie identiques nommés. Ces valeurs par défaut sont personnalisables.

Exemples pratiques:

• Compilation moins:

elixir(function(mix) {
    mix.less("styles.less");
});

compile resources/assets/less/styles.less à public/css/styles.css. La compilation SASS utilise mix.sass(). Elixir gère les préfixes du fournisseur.

• COMPILIR COFFEEScript:

elixir(function(mix) {
    mix.coffee(['controllers.coffee', 'services.coffee']);
});

compile les fichiers coffeecrits de resources/assets/coffee/ à public/js/app.js.

Techniques avancées:

• Fichiers multiples: sass(), less(), coffee() accepter les fichiers uniques, les wildcards, les tableaux ou aucun argument (pour tous les fichiers du répertoire par défaut).

• chemins source / sortie personnalisés:

  • Arguments: Un deuxième argument spécifie le répertoire de sortie:

    elixir(function(mix) {
      mix.less(['file1.less', 'file2.less'], 'custom/path');
    });

  • chemins complets: Préfixe avec ./ pour spécifier des chemins par rapport à la racine du projet.

  • Config Object: La méthode préférée est de modifier css.output et js.output dans l'objet config d'Elixir (discuté plus tard).

• Concaténation: Utiliser scripts() pour JavaScript et styles() pour CSS. Ceux-ci acceptent les arguments pour les chemins de source et de sortie, similaires aux méthodes de compilation. scriptsIn() et stylesIn() concaténer tous les fichiers dans un répertoire spécifié.

• Jade à lame: nécessite laravel-elixir-jade (npm install laravel-elixir-jade@0.1.8 --save-dev). La méthode jade() compile des modèles de jade à lame.

• Versioning de fichiers: mix.version() Ajoute un hachage aux noms de fichiers, empêchant les problèmes de mise en cache. Utilisez l'assistance elixir() dans les modèles de lame pour référencer les fichiers versés.

• Configuration: Le comportement de l'élixir est contrôlé via l'objet config dans node_modules/laravel-elixir/Config.js. Remplacez les paramètres en modifiant l'objet elixir.config dans gulpfile.js ou en créant un fichier elixir.json dans la racine de votre projet.

• Tâches personnalisées: Étendez les fonctionnalités d'Elixir à l'aide de la méthode extend pour créer des tâches Gulp personnalisées.

Un scénario réel (Laravel / Angular):

Cette section détaille un exemple complet démontrant les capacités d'Elixir dans un projet Laravel / Angular. Il couvre la configuration de l'élixir, de la compilation moins et du coffreescript, de la compilation de jade à lame et des actifs de version. Le gulpfile.js complet est fourni, présentant le chaîne de méthode.

Tâches de course:

Run gulp pour exécuter toutes les tâches d'élixir. gulp watch surveille les fichiers pour les modifications et exécute automatiquement les tâches. Les tâches individuelles peuvent être exécutées (par exemple, gulp less). Utiliser gulp --production pour la minification.

Conclusion:

Elixir simplifie la gestion des tâches Gulp, fournissant une interface conviviale pour les tâches de compilation d'actifs courants. Sa flexibilité, sa personnalisation et son intégration avec Laravel en font un outil précieux pour rationaliser les workflows de développement. Ce guide fournit un aperçu complet, mais l'exploration plus approfondie de la documentation d'Elixir est encouragée pour les fonctionnalités avancées.

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!