Le développeur front-end a souvent tendance à se répéter dans certaines tâches. Heureusement, il existe des outils qui facilitent ses tâches, pour que son workflow soit à la fois efficace et rapide. De plus ces outils améliorent la maintenabilité et l’évolution du code au fil du temps.
Dans cet article, je parle des outils que j’utilise couramment. Bien sûr, il y en a d’autres, mais ceux-ci sont les plus courants.
Un workflow rapide grâce à Browsersync
Lorsqu’on développe une page web spécifique, on a l’habitude d’enregistrer le fichier, de changer de fenêtre, et enfin de rafraîchir notre navigateur. Dans certains cas on se retrouve même à redimensionner la page ou à utiliser la vue adaptative lorsque l’on fait du responsive.
Browsersync est en effet un système qui permet l’auto-reload mais pas seulement. Cet auto-reload vous dispense du rafraîchissement du navigateur en lançant un serveur qui écoutera les modifications apportées aux fichiers sur lesquels vous travaillez. De plus, il permet de voir les modifications sur plusieurs écrans.
Browsersync dispose d’un système d’injection de code, de sorte que, si ce n’est pas nécessaire, le navigateur ne se recharge pas mais injecte directement du code dynamiquement.
Une fonctionnalité que je trouve utile aussi est le fait de pouvoir synchroniser le scroll avec tous les devices. Ce qui donne une vue d’ensemble des différents blocs de votre page en même temps. Lors du développement de votre maquette vous pourrez donc travaillez sur plusieurs tailles d’écrans en même temps.
L’installation est simple et l’utilisation se fait soit avec une ligne de commande soit avec un automatiseur de tâches comme Grunt ou Gulp par exemple. La documentation est bone et permet de customiser son expérience avec l’outil.
Un workflow efficace grâce à SASS
Sass est un préprocesseur CSS qui permet de transformer un fichiers Sass en un fichier CSS valide. La syntaxe du langage est souvent tellement proche de CSS qu’on en perçoit à peine la différence. Une des fonctionnalités principales du SASS est l’import de fichiers grâce à la ligne « @import ». Contrairement à un fichier CSS normal, l’import ne s’effectuera pas au niveau du client mais lors de la compilation du fichier CSS.
Généralement on travaille sur un fichier .scss qui accepte une syntaxe se rapprochant au maximum de CSS. Il existe aussi une extension .sass permettant une syntaxe fonctionnant grâce aux indentations, mais qui est aujourd’hui de plus en plus délaissée.
Sass permet l’imbrication de sélecteur CSS, l’utilisation de variables, ce qui est très utile lors de développement de thèmes, des fonctions (que l’on appelle mixins) permettant de définir des styles qui sont par exemple utilisés à plusieurs endroits. Il y a plusieurs autres fonctions, comme la possibilité d’effectuer des opérations arithmétiques ou celle d’écrire des lignes qui se répètent à l’aide de boucles conditionnelles etc… Pour en savoir plus, je vous invite à aller voir ce cours en ligne qui présente une grande partie des fonctionnalités de Sass.
Il existe des frameworks compatible avec SASS comme Compass qui permet par exemple d’ajouter une bibliothèque de mixins prédéfinies destinée à auto-préfixer vos règles CSS.
La compilation des fichiers se fait en ligne de commande ou alors grâce à un automatiseur de tâches.
L’automatiseur de tâches Grunt
Grunt est un automatisateur de tâches « task runner ». Il permet d’enregistrer des tâches via un fichier de configuration, puis, grâce à une simple ligne de commande, d’exécuter ces tâches. Son principal objectif est d’optimiser les opérations que l’on voudrait effectuer avant de mettre son site en ligne. On peut par exemple d’une simple ligne de commande réduire les fichiers CSS, réduire les fichiers Javascript, optimiser les images etc…
On peut par exemple définir une liste de tâches destinées au développement avec la compilation des fichiers CSS et le lancement de Browsersync, mais aussi définir une liste de tâches destinées à la production avec la réduction de tous les fichiers JS, CSS et l’optimisation des images.
Un de ses points forts est sa communauté, mais surtout son excellente documentation.
Les possibilités sont multiples. Grunt permet d’améliorer grandement votre workflow en travaillant sans se soucier des petites tâches qui prennent énormément de temps.
Si cet article vous a plu je vous invite à télécharger notre livre blanc « Les 11 commandements d’un site qui convertit vos visiteurs en clients » et à contacter notre agence web.