En l’espace d’un an, Craft CMS s’est imposé à nous comme une des plateformes de choix pour la gestion de contenu. Les raisons sont nombreuses et dépassent l’objet de cet article mais vous pouvez déjà vous faire une idée des bénéfices sur le site officiel. Nous vous laissons également regarder les projets de l’agence réalisés et propulsés par Craft CMS sur la page « partners » de Craft CMS dont nous faisons partie.
L’arrivée de Craft 3, disponible très prochainement, fait également l’objet de beaucoup d’enthousiasme parmi l’équipe et pousse l’excellence de cet outil à un niveau supérieur.
Une fois n’est pas coutume, cet article s’adressera plus particulièrement aux techniciens et nous vous prions de nous excuser pour l’usage de termes a priori barbares à tous les autres.
Comment intégrer Webpack avec Craft CMS ?
L’intégration de Craft avec notre workflow et nos outils front-end ont été une de nos premières préoccupations. Notamment, il nous fallait un moyen simple et souple de pouvoir gérer les ressources CSS et JavaScript depuis les templates Twig.
Dans cette optique, nous avons créé notre premier plug-in (gratuit) que nous avons le plaisir de vous présenter ici.
Viiiite, comment puis-je installer cette merveille ?
Tout d’abord, pour installer le plug-in, vous pouvez soit :
- utiliser le gestionnaire de dépendance Composer saisissant cette commande à la racine de votre projet Craft 3 :
composer require la-hautes-societe/craft-webpack-assets - vous rendre directement dans le nouvel outil d’administration de Craft 3 pour accéder à la marketplace de plug-in Craft. Il suffit de cliquer sur le bouton “Installer”
Le plugin est conçu pour fonctionner avec Webpack 2 et 3.
La configuration Webpack
Afin de pouvoir générer les fichiers JSON nécessaires pour lier les ressources générées par Webpack à Craft, vous devrez installer les extensions Webpack html-webpack-plugin, write-file-webpack-plugin et underscore-template-loader.
En fonction de vos goûts :
- Soit via Yarn :
yarn add html-webpack-plugin write-file-webpack-plugin underscore-template-loader -D - Soit via NPM :
npm install html-webpack-plugin write-file-webpack-plugin underscore-template-loader --save-dev
On détourne (légèrement) le processus de génération HTML de Webpack afin de lui faire générer les données JSON utilisables par le plugin Craft.
Pour ce faire, on va créer un fichier “template” à destination de html-webpack-plugin. A l’emplacement de votre choix dans votre projet, créez un fichier “assets-files.json.tpl” contenant cette ligne :
<%= JSON.stringify( htmlWebpackPlugin ) %>
Puis, dans votre configuration Webpack, ajouter les propriétés suivantes :
{
plugins: [
new HtmlWebpackPlugin({
filename: 'generated-assets-files.json',
template: 'underscore-template-loader!path/to/templates/assets-files.json.tpl',
inject: false,
chunksSortMode: 'dependency'
}),
new WriteFilePlugin({
test: /generated-assets-files\.json$/,
force: true,
log: false
})
]
}
Ajustez la valeur de “template” pour pointer vers le fichier “assets-files.json.tpl” précédemment créé.
Lancez votre processus Webpack, comme d’habitude.
Conseil de pro : pour vous lancer dans le plug-in, faites comme moi : mettez vous dans l’ambiance avec un bon vieux « Final Countdown »
La configuration du plug-in Craft
Dans le dossier “config” à la racine de votre projet Craft, ajouter un fichier “webpackassets.php” contenant les instructions suivantes :
<?php
return [
'jsonPath' => realpath(__DIR__ . '/path/to/generated-assets-files.json'),
];
Ajustez la valeur de “jsonPath” pour pointer vers le fichier généré par Webpack.
La touche finale (on y est presque)
C’est le moment d’utiliser les données générées par Webpack dans vos templates. Généralement, ça se passera au niveau de votre fichier de layout général :
...
{{ craft.webpackAssets.cssTags() | raw }}
... Or with chunk name ...
{{ craft.webpackAssets.cssTags('app') | raw }}
...
...
{{ craft.webpackAssets.jsTags() | raw }}
... Or with chunk name ...
{{ craft.webpackAssets.jsTags('app') | raw }}
{{ craft.webpackAssets.jsTags('libs') | raw }}
...
Et voilà !
Vos ressources CSS et JavaScript sont désormais accessibles depuis vos templates Twig.
Stay tuned
Nous espérons que ce plug-in vous sera aussi utile que ce qu’il peut nous l’être. Pour accéder à la documentation et au code source à jour, nous vous invitons à vous rendre sur sa page GitHub.
Vos remarques et contributions sont les bienvenues.
Les autres plug-ins de La Haute Société sont à retrouver ici :
https://plugins.craftcms.com/developer/1174
Pour ne rien rater de nos visions d’experts et de nos actualités, n’hésitez pas à vous inscrire à notre newsletter !