[grunt] Les possibilités de ce framework

**dukoid** · 04/02/2016, 09h20

Bonjour,

j'ai suivis des tutos sur grunt, toutefois j'ai une question :
disons que j'ai plusieurs templates, chacun de ces templates chargent des .js et des .css différents mais aussi certains en commun.

donc pour faire ça, il faut faire un gruntfile.js par template ?
ou alors mettre tous les traitements de tous les templates dans un gruntfile.js ?

n'y a t'il pas une astuce pour résoudre cette problématique ?

**SylvainPV** · 05/02/2016, 20h15

Bonjour,

J'ai un peu du mal à te suivre concernant les termes que tu emploies. Grunt n'est pas un framework mais un exécuteur de tâches, alias task runner. Toutes les tâches sont définies et configurées dans un fichier Gruntfile. Il n'y a donc qu'un gruntfile par projet.

Qu'est-ce que tu appelles "template" ? Un rapport avec les templates HTML ?

**dukoid** · 06/02/2016, 08h39

un template c'est une page php ou html, peu importe.

je vais essayer d'expliquer avec un exemple. je prends en compte que les .css et uglify pour simplifier :

page1.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<head>
  <link rel="stylesheet" type="text/css" href="sortie1.css">
</head>
 ...

page2.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<head>
  <link rel="stylesheet" type="text/css" href="sortie2.css">
</head>
...

gruntfile.js (schématiquement)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
uglify:
       jquery.css, theme1.css, jquery-ui.css
      output: sortie1.css
 
uglify:
       jquery.css, theme2.css, fancy-input.css
      output: sortie2.css

Je lance la tache et tout est uglifier, ok.

ce que je veux dire c'est que dans le même fichier gruntfile.js je traite les .css de page1 et page2 et donc si on as plusieurs pages comme ça, entre les .js , les .css , les watchs... ça va devenir vite illisible, non ?

**SylvainPV** · 06/02/2016, 22h06

Tu as un bundle CSS par page ? ça veut dire que l'utilisateur va télécharger X fois le CSS de tes plug-ins jQuery, s'il est présent dans chacun des bundle. C'est vraiment pas top pour la mise en cache, on perd tout l'intérêt du bundle en gain de perf. Le plus souvent, on utilise un seul bundle CSS pour toute l'application. A la rigueur, si tu as beaucoup de CSS différent par page, tu peux séparer ce CSS du reste mais alors garde un bundle séparé pour les ressources communes qui elles ne changent pas (styles de normalisation, bibliothèques, charte graphique etc...).

Concernant la visibilité et la maintenabilité d'un grand Gruntfile, puisqu'il fonctionne avec Node tu peux utiliser les modules ES6 et les instructions import/export pour répartir la configuration de tes tâches en différents fichiers. Il y a aussi des plug-ins dédiés à cet effet. Voilà un article à ce sujet (anglais): http://ericnish.io/blog/how-to-neatl...e-grunt-files/

**dukoid** · 07/02/2016, 08h53

merci pour tes remarques, j'ai compris le principe maintenant.

[grunt] Les possibilités de ce framework

JavaScript

Discussions similaires

Partager

Partager