Visual Studio est sans doute un des logiciels des plus populaire sur .Net pour créer des sites web ou des applications web mobile.
Cependant, le logiciel supporte sass et less mais ne permet pas de les compiler, ce qui rend leur utilisation plus complexe et moins pertinente. Dans la nouvelle version (Visual Studio 2015), l’«intellisense» ne fait pas les relations entre les fichiers scss.
Malgré cela la nouvelle version de Visual Studio nous offre quelques améliorations pour pallier à ce problème.
Visual Studio 2015 inclut un support pour Gulp et Grunt facile à installer et à executer lors du «build», ce qui permet de faire rouler un task manager pour compiler nos css entre autre.
Visual Studio proposait déjà Web Essentials mais ce n’était pas aussi performant.
Gulp sur Visual Studio 2015
Si vous voulez utiliser Gulp avec Visual Studio 2015 rien de plus facile:
- Allez lire mon ancien article pour tout savoir sur Gulp et comment l’installer avec seulement des lignes de commande.
- Assurer-vous d’avoir les prérequis.
- On ouvre un ancien projet ou l’on crée un nouveau projet. À la racine de ce projet, on ajoute un fichier npm. On laisse le nom par défaut: «package.json.»
4. On écrit sous «devDependencies» les extensions de Gulp que l’on veut utiliser. Visual Studio nous aide à trouver les dernières versions. Dès que l’on écrit : » ( il complète les guillemets comme à l’habitude) il va directement vous proposer les versions disponibles des extensions.
5. De plus, à la sauvegarde du fichier «package.json,» Visual Studio va télécharger les fichiers nécessaires.
6. Nous pouvons faire une mise à jour d’une extension simplement en cliquant sur l’ampoule.
7. De la même façon que l’on avait créé notre fichier NPM, on ajoute notre fichier Gulp. En laissant «gulpfile.js» comme nom de fichier.
8. Il y a déjà un peu de code écrit pour vous diriger. Il ne vous reste plus qu’à le compléter et écrire le vôtre.
9. Lorsque l’on sauvegarde le fichier, on fait un clic droit sur ce dernier et on sélectionne «Task Runner Explorer» pour ouvrir l’utilitaire.
10. Ici, on sélectionne nos tâches (task) et on les assigne, selon ce que l’on veut accomplir. Lorsque l’on fait un clic droit sur une tâche, on peut l’assigner ou la démarrer. Visual Studio écrit du code dans le haut du gulpfile.js pour savoir quoi et comment rouler les tâches.
Voilà, vous avez Gulp fonctionnant avec Visual Studio 2015.
Gulp et Visual Studio 2013
Cela se complique, mais c’est toujours possible d’exécuter Gulp. Mais il faut exclusivement l’installer avec cmd. Comme dans mon ancien article. Sauf que pour configurer nos tâches, on peut soit rouler Gulp dans cmd ou avec une extension de Visual Studio qui vous permet de utiliser gulpfile.js dansVisual Studio.
Visual studio Code
Ici, vous n’avez pas le choix… Vous devez vous contenter d’utiliser des lignes de commande. La section faq du site de l’application vous explique la marche à suivre.