{"id":9503,"date":"2015-10-28T16:26:56","date_gmt":"2015-10-28T20:26:56","guid":{"rendered":"http:\/\/www.analystik.ca\/blogue\/?p=9503"},"modified":"2019-01-23T16:22:50","modified_gmt":"2019-01-23T21:22:50","slug":"gulp-et-visual-studio","status":"publish","type":"post","link":"https:\/\/analystik.ca\/blogue\/language\/fr\/gulp-et-visual-studio\/","title":{"rendered":"Gulp et Visual Studio"},"content":{"rendered":"

Visual Studio est sans doute un des logiciels des plus populaire sur .Net\u00a0pour cr\u00e9er des sites web\u00a0ou\u00a0des applications web mobile.<\/p>\n

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’\u00abintellisense\u00bb ne fait pas les relations entre les fichiers scss.<\/p>\n

Malgr\u00e9 cela la nouvelle version de Visual Studio nous offre\u00a0quelques am\u00e9liorations pour pallier \u00e0 ce probl\u00e8me.<\/p>\n

<\/p>\n

Visual Studio 2015 inclut un support pour Gulp et Grunt facile \u00e0 installer et \u00e0 executer\u00a0lors du \u00abbuild\u00bb, ce qui permet de faire rouler un task manager pour compiler nos css entre autre.<\/p>\n

Visual Studio proposait d\u00e9j\u00e0 Web Essentials mais ce n’\u00e9tait pas aussi\u00a0performant.<\/p>\n

Gulp sur Visual Studio 2015<\/strong><\/h2>\n

Si vous voulez utiliser Gulp\u00a0avec Visual Studio 2015 rien de plus facile:<\/p>\n

    \n
  1. Allez lire mon ancien article<\/a> pour tout savoir sur Gulp et comment l’installer avec seulement des lignes de commande.<\/li>\n
  2. Assurer-vous d’avoir les pr\u00e9requis.<\/li>\n
  3. On ouvre un ancien projet ou l\u2019on cr\u00e9e un nouveau projet. \u00c0\u00a0la racine de ce projet, on ajoute un fichier npm. On laisse le nom par d\u00e9faut: \u00abpackage.json.\u00bb<\/li>\n<\/ol>\n\"ajouter<\/a>\n\"Ajouter<\/a>\n

    4. On \u00e9crit sous \u00abdevDependencies\u00bb les extensions de Gulp que l’on veut utiliser. Visual Studio nous aide \u00e0\u00a0trouver les derni\u00e8res versions. D\u00e8s que l’on \u00e9crit :\u00a0\u00bb<\/em> ( il compl\u00e8te les guillemets comme \u00e0 l’habitude) il va directement vous proposer les versions disponibles des extensions.<\/p>\n\"Installation<\/a>\n

    5. De plus, \u00e0 la sauvegarde du fichier \u00abpackage.json,\u00bb Visual Studio\u00a0va t\u00e9l\u00e9charger les fichiers n\u00e9cessaires.<\/p>\n\"Npm<\/a>\n

    6. Nous pouvons faire une mise \u00e0 jour d’une extension simplement en cliquant sur l’ampoule.\"ampule<\/p>\n

    7. De la m\u00eame fa\u00e7on que l’on avait cr\u00e9\u00e9 notre fichier NPM, on ajoute\u00a0notre fichier Gulp. En laissant \u00abgulpfile.js\u00bb comme nom de fichier.<\/p>\n\"ajout<\/a>\n

    8. Il y a d\u00e9j\u00e0 un peu de code \u00e9crit pour vous diriger. Il ne vous reste plus qu’\u00e0 le compl\u00e9ter et \u00e9crire le v\u00f4tre.<\/p>\n\"code<\/a>\n

    9. Lorsque l’on sauvegarde le fichier, on fait un clic droit sur ce dernier et on s\u00e9lectionne\u00a0 \u00abTask Runner Explorer\u00bb pour ouvrir l’utilitaire.<\/p>\n\"ouvrir<\/a>\n

    10. Ici, on s\u00e9lectionne nos t\u00e2ches (task) et on les assigne, selon ce que l’on veut accomplir. Lorsque l’on fait un clic droit sur une t\u00e2che, on peut l’assigner ou la d\u00e9marrer. Visual Studio \u00e9crit du code dans le haut du gulpfile.js pour savoir quoi et comment rouler les t\u00e2ches.<\/p>\n\"fin<\/a>\n

    Voil\u00e0, vous avez Gulp fonctionnant avec\u00a0Visual Studio 2015.<\/p>\n

    Gulp et Visual Studio 2013<\/strong><\/h2>\n

    Cela se complique, mais c’est toujours possible d’ex\u00e9cuter Gulp. Mais il faut exclusivement l’installer avec cmd. Comme dans mon ancien article<\/a>. Sauf que pour configurer nos t\u00e2ches, on peut soit rouler Gulp dans cmd ou avec une extension de Visual Studio<\/a> qui vous permet de utiliser\u00a0gulpfile.js dansVisual Studio.<\/p>\n\"extension<\/a>\n

    Visual studio Code<\/strong><\/p>\n

    Ici, vous n\u2019avez pas le choix… Vous devez vous contenter d’utiliser des lignes de commande. La section faq<\/a>\u00a0du site de l’application vous explique\u00a0la marche \u00e0 suivre.<\/p>\n","protected":false},"excerpt":{"rendered":"

    Visual Studio est sans doute un des logiciels des plus populaire sur .Net\u00a0pour cr\u00e9er des sites web\u00a0ou\u00a0des 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’\u00abintellisense\u00bb ne fait pas… Read more »<\/a><\/p>\n","protected":false},"author":3,"featured_media":11645,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"Gulp et Visual Studio","_seopress_titles_desc":"Voyez comment faire fonctionner Gulp et Visual Studio (les versions 2013, 2015 et code).","_seopress_robots_index":"","content-type":"","footnotes":""},"categories":[3359,3363,36,3371],"tags":[3393,1051],"better_featured_image":{"id":11645,"alt_text":"","caption":"","description":"","media_type":"image","media_details":{"width":1000,"height":563,"file":"2015\/10\/gulpvisual.jpg","sizes":{"thumbnail":{"file":"gulpvisual-150x150.jpg","width":150,"height":150,"mime-type":"image\/jpeg","source_url":"https:\/\/analystik.ca\/blogue\/wp-content\/uploads\/2015\/10\/gulpvisual-150x150.jpg"},"medium":{"file":"gulpvisual-300x169.jpg","width":300,"height":169,"mime-type":"image\/jpeg","source_url":"https:\/\/analystik.ca\/blogue\/wp-content\/uploads\/2015\/10\/gulpvisual-300x169.jpg"},"medium_large":{"file":"gulpvisual-768x432.jpg","width":768,"height":432,"mime-type":"image\/jpeg","source_url":"https:\/\/analystik.ca\/blogue\/wp-content\/uploads\/2015\/10\/gulpvisual-768x432.jpg"},"bones-thumb-960":{"file":"gulpvisual-960x563.jpg","width":960,"height":563,"mime-type":"image\/jpeg","source_url":"https:\/\/analystik.ca\/blogue\/wp-content\/uploads\/2015\/10\/gulpvisual-960x563.jpg"},"bones-thumb-600":{"file":"gulpvisual-600x397.jpg","width":600,"height":397,"mime-type":"image\/jpeg","source_url":"https:\/\/analystik.ca\/blogue\/wp-content\/uploads\/2015\/10\/gulpvisual-600x397.jpg"},"bones-thumb-300":{"file":"gulpvisual-300x199.jpg","width":300,"height":199,"mime-type":"image\/jpeg","source_url":"https:\/\/analystik.ca\/blogue\/wp-content\/uploads\/2015\/10\/gulpvisual-300x199.jpg"},"post-thumbnail":{"file":"gulpvisual-125x125.jpg","width":125,"height":125,"mime-type":"image\/jpeg","source_url":"https:\/\/analystik.ca\/blogue\/wp-content\/uploads\/2015\/10\/gulpvisual-125x125.jpg"}},"image_meta":{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0","keywords":[]}},"post":9527,"source_url":"https:\/\/analystik.ca\/blogue\/wp-content\/uploads\/2015\/10\/gulpvisual.jpg"},"_links":{"self":[{"href":"https:\/\/analystik.ca\/blogue\/wp-json\/wp\/v2\/posts\/9503"}],"collection":[{"href":"https:\/\/analystik.ca\/blogue\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/analystik.ca\/blogue\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/analystik.ca\/blogue\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/analystik.ca\/blogue\/wp-json\/wp\/v2\/comments?post=9503"}],"version-history":[{"count":11,"href":"https:\/\/analystik.ca\/blogue\/wp-json\/wp\/v2\/posts\/9503\/revisions"}],"predecessor-version":[{"id":12122,"href":"https:\/\/analystik.ca\/blogue\/wp-json\/wp\/v2\/posts\/9503\/revisions\/12122"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/analystik.ca\/blogue\/wp-json\/wp\/v2\/media\/11645"}],"wp:attachment":[{"href":"https:\/\/analystik.ca\/blogue\/wp-json\/wp\/v2\/media?parent=9503"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/analystik.ca\/blogue\/wp-json\/wp\/v2\/categories?post=9503"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/analystik.ca\/blogue\/wp-json\/wp\/v2\/tags?post=9503"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}