Optimiser votre configuration Grunt
Publié le
Optimiser vos tâches avec "tasks" et "watch"
Pour ce faire, nous avons besoin de deux modules : grunt-contrib-watch et load-grunt-tasks :
Le module load-grunt-tasks va permettre de créer une seule tâche qui regroupera toutes les autres et le module grunt-contrib-watch vous permettra de lancer automatiquement les tâches à chaque modification d'un fichier.
Ajoutez tout d'abord l'utilisation de load-grunt-tasks à la place de toutes les lignes du type grunt.loadNpmTasks :
Ce module s'occupe de charger les autres tout seul !
Ensuite, ajoutez la configuration pour le module grunt-contrib-watch :
less: {
files: ['demo/assets/themes/default/less/*.less'], // On écoute les fichiers .less du thème
tasks: ['less'], // On lance la tâche less
options: {
spawn: false,
livereload: true // Il fonctionne même avec livreload !
}
},
js: {
files: ['demo/assets/js/*.js', '!demo/assets/js/min.js'], // On écoute les fichiers .js sauf min.js
tasks: ['jshint', 'uglify'], // On lance les tâches jshint et uglify
options: {
spawn: false,
livereload: true // Il fonctionne même avec livreload !
}
}
}
Et pour finir, on crée la tâche générale qui va nous permettre de tout éxécuter en une seule ligne :
Maintenant, enregistrez votre travail et rendez-vous dans votre terminal pour saisir la commande suivante :
Grunt écoute maintenant la moindre modification et s'occupera de tout faire lui même !
A quoi sert l'argument --save ?
Pour finir, une petit explication sur cet argument très utile.
En effet, nous venons de passer un peu de temps à configurer tout cela et il serait bête d'avoir à le refaire sur chaque projet. C'est pourquoi l'argument --save est très utile car il sauvegarde toutes vos dépendances dans les fichiers package.json et bower.json. Ainsi, à chaque nouveau projet, vous n'avez qu'à copier les fichiers package.json, bower.json et Gruntfile.js. Il vous suffit ensuite d'éxécuter les deux lignes suivantes :
npm install // Va lire la configuration Grunt pour rapatrier tous les modules
Et voilà, vous serez désormais opérationnel pour travailler sur un nouveau template Thelia en quelques secondes !
Aller plus loin :
Ce tutoriel ne vous offre qu'une base de travail, il est bien sûr possible de faire encore de nombreuses choses avec ces deux outils, je vous laisse découvrir tout cela par vous même grâce aux documentations de Grunt et Bower.
Vous pouvez aussi vous appuyer sur le dépôt FrontInit qui vous offre une base solide (et plus complète) de travail pour débuter vos intégrations web.
Ajouter votre commentaire
Les commentaires