Gulp et Visual Studio

Voir la version AMP

Notice: Undefined offset: 1 in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 175

Notice: Undefined offset: 1 in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 175

Notice: Undefined offset: 1 in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 175

Notice: Undefined offset: 1 in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 175

Notice: Undefined variable: style in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 149

Notice: Undefined variable: wplinks_image in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 149

Notice: Undefined variable: wplinks_image in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 149

Notice: Undefined offset: 1 in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 175

Notice: Undefined offset: 1 in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 175

Notice: Undefined variable: style in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 149

Notice: Undefined variable: wplinks_image in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 149

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:

  1. Allez lire mon ancien article pour tout savoir sur Gulp et comment l’installer avec seulement des lignes de commande.
  2. Assurer-vous d’avoir les prérequis.
  3. 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.»
ajouter un nouveau fichier Ajouter un nouveau fichier npm

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.

Installation des extension

5. De plus, à la sauvegarde du fichier «package.json,» Visual Studio va télécharger les fichiers nécessaires.

Npm output

6. Nous pouvons faire une mise à jour d’une extension simplement en cliquant sur l’ampoule.ampule dans Visual Studio

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.

ajout du fichier gulpfile.js

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.

code de départ

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.

ouvrir la fenêtre du "task runner"

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.

fin du processus

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.

extension task runner

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.

Laisser un commentaire

Votre adresse courriel ne sera pas publiée. Les champs obligatoires sont indiqués avec *