Jérémy Jeanson's blog
chasseur de bugs depuis .net 1.0

Avoir un workflow efficace quand on passe son temps à jongler entre NPM, Gulp, Webpack, PowerShell … n’est pas toujours évident. Il faut régulièrement lancer des commandes qui peuvent changer d’un environnement à un autre ou d’un projet à un autre.

Je vous propose de découvrir ici quelques solutions pour améliorer votre productivité avec Visual Studio (2019, 2017 et 2015).

L’intégration du Task Runner

Le Task Runner est un composant essentiel pour gagner du temps.

Il est disponible via le menu View > Other Windows > Task Runner Explorer.

Via une seule et même interface qui va agréger toutes vos technologies, le Task Runner Explorer va permettre de :

• Découvrir automatiquement les tâches exposées par vos projets.
• Lancer rapidement des tâches.
• Automatiser l’exécution de tâches.
• Afficher les résultats d’exécution des tâches.

La découverte des tâches est un élément souvent négligé. Elle est pourtant très intéressante. Elle nous évite d’avoir à consulter l’ensemble de nos fichiers pour rechercher les tâches. Sur de grosses solutions, le gain de temps est significatif (surtout si notre solution mélange plusieurs technologies).

Il a cependant un inconvénient. De base, il ne sait gérer que Gulp et Grunt.

Heureusement, ce support peut être étendu via quelques extensions bien pratiques :

• NPM Task Runner.
• WebPack Task Runner.
• Command Task Runner (pour PowerShell, .exe, .bat, .cmd).

J’ai listé ici les extensions qui correspondent à mes usages, mais il y en beaucoup d’autres sur le marketplace.

Petit bonus de l’extension NPM : En plus de nos scripts NPM, elle ajoute les commandes install et update. Plus besoin de lancer une console pour cela.

L’automatisation des tâches

Le Task Runner permet d’exécuter automatiquement des tâches :

• Avant la Build du projet.
• Après la Build du projet.
• Quand on utilise la commande Clean du projet ou de la solution.
• À l’ouverture du projet.

Si les deux premières options sont les plus connues, les deux dernières sont à mon sens, celle qui font gagner le plus de temps :

• Le Clean, va vous permettre de programmer quelques tâches barbares qui se chargent de supprimer les fichiers produits par les autres tâches (très pratique quand on veut s’assurer que notre projet ne contient que ce qui est utile). Je suis déjà tombé sur un cas où cette tâche a permis de résoudre un bug lié à un ancien fichier qui n’était plus utile.
• À l’ouverture du projet, on peut lancer les tâches qui permettent à des outils tiers de s’exécuter en tâche de fond. Les fameux « watch » si pratiques, qui pourront lancer des tâches quand des fichiers seront modifiés (compilation, mise en bundle, tests).

Pour automatiser une tâche, il suffit de faire un click droit sur celle-ci, de dérouler le menu Bindings et de sélectionner l’élément qui nous intéresse.

En cas de doute, Le Task Runner permet d’afficher les Bindings déjà configurés.

Voici un petit exemple avec une partie d’un fichier Gulp :

/// <binding AfterBuild='build' Clean='clean' ProjectOpened='watch' />
"use strict";

// Common 
const { src, dest, parallel, watch } = require("gulp");
const del = require("del");

// …. 
// Many tasks (code removed). ...
// …. 

// Watch
exports.watch = function () {
    watch(paths.input + "js/*.js", function (cb) {
        exports.buildScripts();
        cb();
    });
    watch(paths.input + "css/*", function (cb) {
        exports.buildCss();
        cb();
    });
};

// Build
exports.build = parallel(
    exports.buildScripts,
    exports.buildCss,
    exports.buildFonts);

// Clean
exports.clean = function () {
    return del([
        paths.outputCss,
        paths.outputJs,
        paths.outputFonts
    ]);
};

En début de fichier, on voit bien que Visual Studio a ajouté les Bindings. En fin de fichier il y a la tâche watch qui s’exécute à l’ouverture du projet et qui me permet de ne plus avoir à faire attention à Gulp quand je travaille. Il lance pour moi toutes les tâches liées à la génération de mes bundles JS et CSS dès que je change un fichier (les tests sont déjà gérés via Test Explorer).

Côté navigateur

Avoir un Task Runner qui génère nos fichiers sans qu’on le lui demande est une bonne chose. Il reste encore une tâche rébarbative : lancer le rafraichissement du navigateur.

Heureusement, avec Visual Studio il a une option pour cela ;)

Il s’agit de Browser Link. De base, Browser Link permet d’afficher notre site via plusieurs navigateurs en même temps pour les comparer. Il est aussi en mesure de rafraichir les navigateurs quand un fichier CSS est mis à jour.

Via une extension, il est possible d’utiliser Browser Link pour qu’il rafraichisse les navigateurs quand un fichier est enregistré. Il s’agit de « Browser Reload on Save »

Si certains Frameworks JavaScript intègrent le refresh / reload automatique, ce n’est pas le cas pour tous. Dans un contexte où l’on veut gagner du temps quel que soit le Framework front utilisé, Browser Link est indispensable.

Conclusion

On peut vraiment déléguer tout type de tâche à Visual Studio. On y gagne du temps et l’on peut se focaliser sur l’essentiel : le code.

Petit plus : on réduit l’usage des touches F5 et F6. Votre clavier durera peut-être plus longtemps ;)