{"id":7286,"date":"2025-08-26T11:22:38","date_gmt":"2025-08-26T11:22:38","guid":{"rendered":"https:\/\/techhub.saworks.io\/docs\/tutoriel-github-intermediaire\/creer-des-applications-avec-azure-devops\/exercice-creez-le-pipeline\/"},"modified":"2025-09-24T12:02:34","modified_gmt":"2025-09-24T12:02:34","slug":"exercice-creez-le-pipeline","status":"publish","type":"docs","link":"https:\/\/techhub.saworks.io\/fr\/docs\/tutoriel-github-intermediaire\/creer-des-applications-avec-azure-devops\/exercice-creez-le-pipeline\/","title":{"rendered":"Exercice \u2013 Cr\u00e9ez le pipeline"},"content":{"rendered":"\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<p><strong>Choisissez votre environnement de d\u00e9veloppement pour le module de formation.<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Environnement de d\u00e9veloppement local utilisant un agent h\u00e9berg\u00e9 par Microsoft<\/strong><\/li>\n\n\n\n<li><strong>Environnement de d\u00e9veloppement GitHub Codespaces utilisant un agent auto-h\u00e9berg\u00e9.<\/strong><\/li>\n<\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u00c0 ce stade, Mara a d\u00e9fini une configuration de build pour le site web Space Game.<\/strong><\/h3>\n\n\n\n<p>Maintenant, c\u2019est \u00e0 votre tour : vous allez cr\u00e9er un pipeline et produire votre&nbsp;<strong>premier artefact de build<\/strong>.<\/p>\n\n\n\n<p>Comme vous l\u2019avez vu, Mara a utilis\u00e9 un fichier&nbsp;<strong>YAML<\/strong>&nbsp;pour d\u00e9finir le build. Lorsque vous cr\u00e9ez un pipeline, le processus vous demande votre fichier YAML. Le projet ne contient pas encore ce fichier.<\/p>\n\n\n\n<p>Lorsque vous ne fournissez pas de fichier YAML initial pour votre projet,&nbsp;<strong>Azure Pipelines peut en cr\u00e9er un pour vous<\/strong>&nbsp;en fonction du type d\u2019application. Ici, vous allez compiler une application&nbsp;<strong>ASP.NET Core<\/strong>, mais Azure Pipelines propose \u00e9galement des configurations de build de d\u00e9marrage pour d\u2019autres types de projets, comme&nbsp;<strong>Java<\/strong>,&nbsp;<strong>Go<\/strong>, et bien d\u2019autres.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Cr\u00e9er le pipeline<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Dans\u00a0<strong>Azure DevOps<\/strong>, acc\u00e9dez \u00e0 votre projet.<\/li>\n\n\n\n<li>Depuis la page du projet ou le panneau de gauche, s\u00e9lectionnez\u00a0<strong>Pipelines<\/strong>.<\/li>\n\n\n\n<li>S\u00e9lectionnez\u00a0<strong>Cr\u00e9er un pipeline<\/strong>\u00a0(ou\u00a0<strong>Nouveau pipeline<\/strong>\u00a0si ce n\u2019est pas le premier pipeline du projet).<\/li>\n\n\n\n<li>Dans l\u2019onglet\u00a0<strong>Connexion<\/strong>, s\u00e9lectionnez\u00a0<strong>GitHub<\/strong>.<\/li>\n\n\n\n<li>Lorsque vous y \u00eates invit\u00e9, entrez vos\u00a0<strong>identifiants GitHub<\/strong>.<\/li>\n\n\n\n<li>Dans l\u2019onglet\u00a0<strong>S\u00e9lection<\/strong>, choisissez votre d\u00e9p\u00f4t\u00a0<strong>mslearn-tailspin-spacegame-web<\/strong>.<\/li>\n\n\n\n<li>Pour installer l\u2019application Azure Pipelines, vous pouvez \u00eatre redirig\u00e9 vers GitHub. Si c\u2019est le cas, faites d\u00e9filer vers le bas et s\u00e9lectionnez\u00a0<strong>Approuver et installer<\/strong>.<\/li>\n\n\n\n<li>Dans l\u2019onglet\u00a0<strong>Configuration<\/strong>, s\u00e9lectionnez\u00a0<strong>ASP.NET Core<\/strong>.<\/li>\n<\/ol>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group has-background is-layout-constrained wp-block-group-is-layout-constrained\" style=\"border-width:1px;border-radius:15px;background-color:#9b51e04d\">\n<h3 class=\"wp-block-heading\"><strong>Remarque<\/strong><\/h3>\n\n\n\n<p>Si vous ne voyez pas cette option, cliquez sur\u00a0<strong>Afficher plus<\/strong>.<br><strong>Ne s\u00e9lectionnez pas<\/strong>\u00a0<em>ASP.NET Core (.NET Framework)<\/em>.<\/p>\n<\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"398\" height=\"171\" data-src=\"https:\/\/techhub.saworks.io\/wp-content\/uploads\/2025\/08\/6-configure-app-type.png\" alt=\"\" class=\"wp-image-7289 lazyload\" data-srcset=\"https:\/\/techhub.saworks.io\/wp-content\/uploads\/2025\/08\/6-configure-app-type.png 398w, https:\/\/techhub.saworks.io\/wp-content\/uploads\/2025\/08\/6-configure-app-type-300x129.png 300w\" data-sizes=\"(max-width: 398px) 100vw, 398px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 398px; --smush-placeholder-aspect-ratio: 398\/171;\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group has-background is-layout-constrained wp-block-group-is-layout-constrained\" style=\"border-width:1px;border-radius:15px;background-color:#9b51e04d\">\n<h3 class=\"wp-block-heading\"><strong>Remarque<\/strong><\/h3>\n\n\n\n<p>Si votre d\u00e9p\u00f4t contient un fichier\u00a0<code>azure-pipelines.yml<\/code>\u00a0\u00e0 la racine,\u00a0<strong>Azure DevOps peut ignorer l\u2019\u00e9tape de configuration<\/strong>.<br>Pour r\u00e9soudre ce probl\u00e8me,\u00a0<strong>supprimez ou renommez le fichier<\/strong>.<\/p>\n<\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>8. <strong>Dans l\u2019onglet R\u00e9vision<\/strong>, notez la configuration initiale du build.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"696\" height=\"501\" data-src=\"https:\/\/techhub.saworks.io\/wp-content\/uploads\/2025\/08\/6-initial-pipeline-yml.png\" alt=\"\" class=\"wp-image-7291 lazyload\" data-srcset=\"https:\/\/techhub.saworks.io\/wp-content\/uploads\/2025\/08\/6-initial-pipeline-yml.png 696w, https:\/\/techhub.saworks.io\/wp-content\/uploads\/2025\/08\/6-initial-pipeline-yml-300x216.png 300w\" data-sizes=\"(max-width: 696px) 100vw, 696px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 696px; --smush-placeholder-aspect-ratio: 696\/501;\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Il s\u2019agit d\u2019une configuration tr\u00e8s basique<\/strong>&nbsp;que Azure DevOps vous fournit en fonction du type de votre application, ici&nbsp;<strong>ASP.NET Core<\/strong>.<\/p>\n\n\n\n<p>La configuration par d\u00e9faut utilise un&nbsp;<strong>agent h\u00e9berg\u00e9 par Microsoft<\/strong>.<\/p>\n\n\n\n<p><strong>Remplacez le texte<\/strong>&nbsp;<code>vmImage: ubuntu-latest<\/code>&nbsp;par&nbsp;<code>name: Default<\/code>&nbsp;(ou le nom de votre&nbsp;<strong>pool d\u2019agents<\/strong>&nbsp;si vous avez sp\u00e9cifi\u00e9 un pool diff\u00e9rent lors de la configuration des secrets du d\u00e9p\u00f4t Codespaces).<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Dans l\u2019onglet R\u00e9vision<\/strong>, s\u00e9lectionnez&nbsp;<strong>Enregistrer et ex\u00e9cuter<\/strong>.<\/h3>\n\n\n\n<p>Pour&nbsp;<strong>valider vos modifications sur GitHub<\/strong>&nbsp;et d\u00e9marrer le pipeline :<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Choisissez\u00a0<strong>Valider directement sur la branche main<\/strong>.<\/li>\n\n\n\n<li>S\u00e9lectionnez\u00a0<strong>Enregistrer et ex\u00e9cuter<\/strong>\u00a0une seconde fois.<\/li>\n<\/ol>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Si vous \u00eates invit\u00e9 \u00e0 accorder une autorisation<\/strong>&nbsp;avec un message du type&nbsp;<em>Ce pipeline a besoin d\u2019une autorisation pour acc\u00e9der \u00e0 une ressource avant de pouvoir continuer<\/em>, s\u00e9lectionnez&nbsp;<strong>Afficher<\/strong>&nbsp;et suivez les instructions pour autoriser l\u2019acc\u00e8s.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Suivez l\u2019ex\u00e9cution du pipeline<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Sous\u00a0<strong>Jobs<\/strong>, s\u00e9lectionnez\u00a0<strong>Job<\/strong>.<\/li>\n\n\n\n<li>Ensuite, suivez le processus de build \u00e9tape par \u00e9tape.<\/li>\n\n\n\n<li>Pour voir la sortie du job sous forme de fichier texte une fois le build termin\u00e9, vous pouvez aussi s\u00e9lectionner\u00a0<strong>Afficher le journal brut<\/strong>\u00a0(<em>View raw log<\/em>).<\/li>\n<\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Si votre pipeline ne d\u00e9marre pas rapidement<\/strong>, v\u00e9rifiez que&nbsp;<strong>Codespaces est toujours actif<\/strong>.<\/p>\n\n\n\n<p>Codespaces se ferme automatiquement apr\u00e8s&nbsp;<strong>30 minutes<\/strong>&nbsp;et peut n\u00e9cessiter un red\u00e9marrage.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Ici, vous voyez les \u00e9tapes cr\u00e9\u00e9es par la d\u00e9finition du build :<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Pr\u00e9paration de la machine virtuelle (VM)<\/li>\n\n\n\n<li>R\u00e9cup\u00e9ration du dernier code source depuis GitHub<\/li>\n\n\n\n<li>Compilation de l\u2019application<\/li>\n<\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Cette configuration est un excellent point de d\u00e9part<\/strong>, car vous avez maintenant un endroit o\u00f9 ajouter des&nbsp;<strong>t\u00e2ches de build<\/strong>.<\/h3>\n\n\n\n<p>Vous devez encore la mettre \u00e0 jour pour r\u00e9pondre aux besoins de l\u2019\u00e9quipe Tailspin, comme la&nbsp;<strong>minification des fichiers JavaScript et CSS<\/strong>.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group has-background is-layout-constrained wp-block-group-is-layout-constrained\" style=\"background-color:#fcb90054\">\n<h3 class=\"wp-block-heading\">\ud83d\udca1&nbsp;<strong>Astuce<\/strong><\/h3>\n\n\n\n<p>V\u00e9rifiez votre bo\u00eete mail. Vous avez peut-\u00eatre d\u00e9j\u00e0 re\u00e7u une\u00a0<strong>notification de build<\/strong>\u00a0avec les r\u00e9sultats de l\u2019ex\u00e9cution.<br>Vous pouvez utiliser ces notifications pour informer les membres de votre \u00e9quipe lorsque les builds sont termin\u00e9s, et indiquer si chaque build a r\u00e9ussi ou \u00e9chou\u00e9.<\/p>\n<\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Ajouter des t\u00e2ches de build<\/strong><\/h3>\n\n\n\n<p>Maintenant que vous avez un processus de build fonctionnel, vous pouvez commencer \u00e0&nbsp;<strong>ajouter des t\u00e2ches de build<\/strong>.<\/p>\n\n\n\n<p>Rappelez-vous que vous travaillez depuis la branche&nbsp;<strong>main<\/strong>. Pour conserver votre travail, vous allez maintenant cr\u00e9er une branche nomm\u00e9e&nbsp;<strong>build-pipeline<\/strong>.<br>Cette branche vous permet d\u2019exp\u00e9rimenter et de finaliser votre build sans impacter le reste de l\u2019\u00e9quipe.<\/p>\n\n\n\n<p>Vous pouvez ajouter des t\u00e2ches de build au fichier&nbsp;<code>azure-pipelines.yml<\/code>&nbsp;<strong>directement depuis Azure Pipelines<\/strong>.<br>Azure Pipelines validera vos modifications directement dans votre branche.<br>Ici, vous allez&nbsp;<strong>modifier le fichier&nbsp;<code>azure-pipelines.yml<\/code>&nbsp;localement<\/strong>&nbsp;et&nbsp;<strong>pousser<\/strong>&nbsp;(ou&nbsp;<strong>t\u00e9l\u00e9verser<\/strong>) vos modifications sur GitHub.<br>Cette m\u00e9thode vous permet de&nbsp;<strong>pratiquer vos comp\u00e9tences Git<\/strong>.<br>Observez comment le pipeline compile automatiquement l\u2019application lorsque vous poussez des modifications.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>En pratique, vous pourriez ajouter les t\u00e2ches de build&nbsp;<strong>une par une<\/strong>, pousser vos modifications, et observer l\u2019ex\u00e9cution du build.<br>Ici, vous allez ajouter&nbsp;<strong>toutes les t\u00e2ches de build identifi\u00e9es pr\u00e9c\u00e9demment<\/strong>&nbsp;en une seule fois.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group has-background is-layout-constrained wp-block-group-is-layout-constrained\" style=\"border-width:1px;border-radius:15px;background-color:#9b51e04d\">\n<h3 class=\"wp-block-heading\"><strong>Remarque<\/strong><\/h3>\n\n\n\n<p>Vous allez ex\u00e9cuter quelques\u00a0<strong>commandes Git<\/strong>.<br>Ne vous inqui\u00e9tez pas si vous d\u00e9butez avec Git \u2014 nous allons vous montrer quoi faire.<br>Nous approfondirons Git dans les modules suivants.<\/p>\n<\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Dans Visual Studio Code<\/strong>, ouvrez le&nbsp;<strong>terminal int\u00e9gr\u00e9<\/strong>.<\/h3>\n\n\n\n<p>Assurez-vous d\u2019\u00eatre sur la branche&nbsp;<strong>main<\/strong>&nbsp;de votre d\u00e9p\u00f4t, puis suivez les \u00e9tapes suivantes.<\/p>\n\n\n\n<p>Pour r\u00e9cup\u00e9rer les derni\u00e8res modifications depuis GitHub et mettre \u00e0 jour votre branche main, ex\u00e9cutez la commande suivante :<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.75rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#24292e;--cbp-line-number-width:calc(1 * 0.6 * .75rem);line-height:1rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#f2f2f2;color:#2f363c\">Bash<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#24292e;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>git pull origin main<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-light\" style=\"background-color: #fff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #6F42C1\">git<\/span><span style=\"color: #24292E\"> <\/span><span style=\"color: #032F62\">pull<\/span><span style=\"color: #24292E\"> <\/span><span style=\"color: #032F62\">origin<\/span><span style=\"color: #24292E\"> <\/span><span style=\"color: #032F62\">main<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Vous verrez dans la sortie que Git r\u00e9cup\u00e8re un fichier nomm\u00e9&nbsp;<strong>azure-pipelines.yml<\/strong>.<br>Il s\u2019agit de la&nbsp;<strong>configuration de pipeline de d\u00e9marrage<\/strong>&nbsp;qu\u2019Azure Pipelines a cr\u00e9\u00e9e pour vous.<br>Lorsque vous configurez le pipeline, Azure Pipelines ajoute ce fichier \u00e0 votre&nbsp;<strong>d\u00e9p\u00f4t GitHub<\/strong>.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Pour cr\u00e9er une branche nomm\u00e9e&nbsp;<code>build-pipeline<\/code>, ex\u00e9cutez la commande suivante :<\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.75rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#24292e;--cbp-line-number-width:calc(1 * 0.6 * .75rem);line-height:1rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#f2f2f2;color:#2f363c\">Bash<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#24292e;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>git checkout -B build-pipeline<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-light\" style=\"background-color: #fff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #6F42C1\">git<\/span><span style=\"color: #24292E\"> <\/span><span style=\"color: #032F62\">checkout<\/span><span style=\"color: #24292E\"> <\/span><span style=\"color: #005CC5\">-B<\/span><span style=\"color: #24292E\"> <\/span><span style=\"color: #032F62\">build-pipeline<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Dans Visual Studio Code<\/strong>, modifiez le fichier\u00a0<code>azure-pipelines.yml<\/code>\u00a0comme indiqu\u00e9 ici :<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.75rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#24292e;--cbp-line-number-width:calc(2 * 0.6 * .75rem);line-height:1rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#f2f2f2;color:#2f363c\">YAML<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#24292e;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>trigger:\n- '*'\n\npool:\n  name: 'Default' # Replace Default with the name of your agent pool if you used a different pool\n\nvariables:\n  buildConfiguration: 'Release'\n\nsteps:\n- task: UseDotNet@2\n  displayName: 'Use .NET SDK 6.x'\n  inputs:\n    packageType: sdk\n    version: '6.x'\n\n- task: Npm@1\n  displayName: 'Run npm install'\n  inputs:\n    verbose: false\n\n- script: '.\/node_modules\/.bin\/node-sass Tailspin.SpaceGame.Web\/wwwroot --output Tailspin.SpaceGame.Web\/wwwroot'\n  displayName: 'Compile Sass assets'\n\n- task: gulp@1\n  displayName: 'Run gulp tasks'\n\n- script: 'echo \"$(Build.DefinitionName), $(Build.BuildId), $(Build.BuildNumber)\" > buildinfo.txt'\n  displayName: 'Write build info'\n  workingDirectory: Tailspin.SpaceGame.Web\/wwwroot\n\n- task: DotNetCoreCLI@2\n  displayName: 'Restore project dependencies'\n  inputs:\n    command: 'restore'\n    projects: '**\/*.csproj'\n\n- task: DotNetCoreCLI@2\n  displayName: 'Build the project - Release'\n  inputs:\n    command: 'build'\n    arguments: '--no-restore --configuration Release'\n    projects: '**\/*.csproj'<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-light\" style=\"background-color: #fff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #22863A\">trigger<\/span><span style=\"color: #24292E\">:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #24292E\">- <\/span><span style=\"color: #032F62\">&#39;*&#39;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #22863A\">pool<\/span><span style=\"color: #24292E\">:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #24292E\">  <\/span><span style=\"color: #22863A\">name<\/span><span style=\"color: #24292E\">: <\/span><span style=\"color: #032F62\">&#39;Default&#39;<\/span><span style=\"color: #24292E\"> <\/span><span style=\"color: #6A737D\"># Replace Default with the name of your agent pool if you used a different pool<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #22863A\">variables<\/span><span style=\"color: #24292E\">:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #24292E\">  <\/span><span style=\"color: #22863A\">buildConfiguration<\/span><span style=\"color: #24292E\">: <\/span><span style=\"color: #032F62\">&#39;Release&#39;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #22863A\">steps<\/span><span style=\"color: #24292E\">:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #24292E\">- <\/span><span style=\"color: #22863A\">task<\/span><span style=\"color: #24292E\">: <\/span><span style=\"color: #032F62\">UseDotNet@2<\/span><\/span>\n<span class=\"line\"><span style=\"color: #24292E\">  <\/span><span style=\"color: #22863A\">displayName<\/span><span style=\"color: #24292E\">: <\/span><span style=\"color: #032F62\">&#39;Use .NET SDK 6.x&#39;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #24292E\">  <\/span><span style=\"color: #22863A\">inputs<\/span><span style=\"color: #24292E\">:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #24292E\">    <\/span><span style=\"color: #22863A\">packageType<\/span><span style=\"color: #24292E\">: <\/span><span style=\"color: #032F62\">sdk<\/span><\/span>\n<span class=\"line\"><span style=\"color: #24292E\">    <\/span><span style=\"color: #22863A\">version<\/span><span style=\"color: #24292E\">: <\/span><span style=\"color: #032F62\">&#39;6.x&#39;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #24292E\">- <\/span><span style=\"color: #22863A\">task<\/span><span style=\"color: #24292E\">: <\/span><span style=\"color: #032F62\">Npm@1<\/span><\/span>\n<span class=\"line\"><span style=\"color: #24292E\">  <\/span><span style=\"color: #22863A\">displayName<\/span><span style=\"color: #24292E\">: <\/span><span style=\"color: #032F62\">&#39;Run npm install&#39;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #24292E\">  <\/span><span style=\"color: #22863A\">inputs<\/span><span style=\"color: #24292E\">:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #24292E\">    <\/span><span style=\"color: #22863A\">verbose<\/span><span style=\"color: #24292E\">: <\/span><span style=\"color: #005CC5\">false<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #24292E\">- <\/span><span style=\"color: #22863A\">script<\/span><span style=\"color: #24292E\">: <\/span><span style=\"color: #032F62\">&#39;.\/node_modules\/.bin\/node-sass Tailspin.SpaceGame.Web\/wwwroot --output Tailspin.SpaceGame.Web\/wwwroot&#39;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #24292E\">  <\/span><span style=\"color: #22863A\">displayName<\/span><span style=\"color: #24292E\">: <\/span><span style=\"color: #032F62\">&#39;Compile Sass assets&#39;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #24292E\">- <\/span><span style=\"color: #22863A\">task<\/span><span style=\"color: #24292E\">: <\/span><span style=\"color: #032F62\">gulp@1<\/span><\/span>\n<span class=\"line\"><span style=\"color: #24292E\">  <\/span><span style=\"color: #22863A\">displayName<\/span><span style=\"color: #24292E\">: <\/span><span style=\"color: #032F62\">&#39;Run gulp tasks&#39;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #24292E\">- <\/span><span style=\"color: #22863A\">script<\/span><span style=\"color: #24292E\">: <\/span><span style=\"color: #032F62\">&#39;echo &quot;$(Build.DefinitionName), $(Build.BuildId), $(Build.BuildNumber)&quot; &gt; buildinfo.txt&#39;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #24292E\">  <\/span><span style=\"color: #22863A\">displayName<\/span><span style=\"color: #24292E\">: <\/span><span style=\"color: #032F62\">&#39;Write build info&#39;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #24292E\">  <\/span><span style=\"color: #22863A\">workingDirectory<\/span><span style=\"color: #24292E\">: <\/span><span style=\"color: #032F62\">Tailspin.SpaceGame.Web\/wwwroot<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #24292E\">- <\/span><span style=\"color: #22863A\">task<\/span><span style=\"color: #24292E\">: <\/span><span style=\"color: #032F62\">DotNetCoreCLI@2<\/span><\/span>\n<span class=\"line\"><span style=\"color: #24292E\">  <\/span><span style=\"color: #22863A\">displayName<\/span><span style=\"color: #24292E\">: <\/span><span style=\"color: #032F62\">&#39;Restore project dependencies&#39;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #24292E\">  <\/span><span style=\"color: #22863A\">inputs<\/span><span style=\"color: #24292E\">:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #24292E\">    <\/span><span style=\"color: #22863A\">command<\/span><span style=\"color: #24292E\">: <\/span><span style=\"color: #032F62\">&#39;restore&#39;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #24292E\">    <\/span><span style=\"color: #22863A\">projects<\/span><span style=\"color: #24292E\">: <\/span><span style=\"color: #032F62\">&#39;**\/*.csproj&#39;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #24292E\">- <\/span><span style=\"color: #22863A\">task<\/span><span style=\"color: #24292E\">: <\/span><span style=\"color: #032F62\">DotNetCoreCLI@2<\/span><\/span>\n<span class=\"line\"><span style=\"color: #24292E\">  <\/span><span style=\"color: #22863A\">displayName<\/span><span style=\"color: #24292E\">: <\/span><span style=\"color: #032F62\">&#39;Build the project - Release&#39;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #24292E\">  <\/span><span style=\"color: #22863A\">inputs<\/span><span style=\"color: #24292E\">:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #24292E\">    <\/span><span style=\"color: #22863A\">command<\/span><span style=\"color: #24292E\">: <\/span><span style=\"color: #032F62\">&#39;build&#39;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #24292E\">    <\/span><span style=\"color: #22863A\">arguments<\/span><span style=\"color: #24292E\">: <\/span><span style=\"color: #032F62\">&#39;--no-restore --configuration Release&#39;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #24292E\">    <\/span><span style=\"color: #22863A\">projects<\/span><span style=\"color: #24292E\">: <\/span><span style=\"color: #032F62\">&#39;**\/*.csproj&#39;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Sous la section&nbsp;<code>steps<\/code><\/strong>, vous voyez les&nbsp;<strong>t\u00e2ches de build<\/strong>&nbsp;qui correspondent \u00e0 chacune des commandes du script que nous avons identifi\u00e9es pr\u00e9c\u00e9demment.<\/h4>\n\n\n\n<p>Azure Pipelines fournit des&nbsp;<strong>t\u00e2ches de build int\u00e9gr\u00e9es<\/strong>&nbsp;qui correspondent \u00e0 de nombreuses activit\u00e9s de build courantes.<br>Par exemple, la t\u00e2che&nbsp;<code>DotNetCoreCLI@2<\/code>&nbsp;correspond \u00e0 l\u2019utilitaire en ligne de commande&nbsp;<code>dotnet<\/code>.<br>Le pipeline utilise&nbsp;<code>DotNetCoreCLI@2<\/code>&nbsp;<strong>deux fois<\/strong>&nbsp;: une fois pour&nbsp;<strong>restaurer<\/strong>&nbsp;(installer) les d\u00e9pendances du projet, et une autre fois pour&nbsp;<strong>compiler<\/strong>&nbsp;le projet.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Rappel :<\/strong><\/h3>\n\n\n\n<p>Toutes les activit\u00e9s de build ne correspondent pas \u00e0 une t\u00e2che int\u00e9gr\u00e9e.<br>Par exemple, il n\u2019existe pas de t\u00e2che int\u00e9gr\u00e9e pour ex\u00e9cuter l\u2019utilitaire&nbsp;<strong>node-sass<\/strong>, ni pour \u00e9crire des informations de build dans un fichier texte.<br>Pour ex\u00e9cuter des&nbsp;<strong>commandes syst\u00e8me g\u00e9n\u00e9rales<\/strong>, vous utilisez la t\u00e2che&nbsp;<code>CmdLine@2<\/code>&nbsp;ou&nbsp;<code>script<\/code>.<br>Le pipeline utilise ici la t\u00e2che&nbsp;<code>script<\/code>, car c\u2019est un raccourci courant pour&nbsp;<code>CmdLine@2<\/code>.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Dans l\u2019\u00e9tape de build qui \u00e9crit des informations sur le build dans un fichier<\/strong>, remarquez les \u00e9l\u00e9ments suivants :<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>$(Build.DefinitionName)<\/code><\/li>\n\n\n\n<li><code>$(Build.BuildId)<\/code><\/li>\n\n\n\n<li><code>$(Build.BuildNumber)<\/code><\/li>\n<\/ul>\n\n\n\n<p>Ce sont des&nbsp;<strong>variables int\u00e9gr\u00e9es<\/strong>&nbsp;que le syst\u00e8me fournit pour une utilisation dans vos pipelines :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>$(Build.DefinitionName)<\/code>\u00a0: nom du pipeline de build, par exemple\u00a0<code>\"SpaceGame-Web-CI\"<\/code>.<\/li>\n\n\n\n<li><code>$(Build.BuildId)<\/code>\u00a0: identifiant num\u00e9rique du build termin\u00e9, par exemple\u00a0<code>115<\/code>.<\/li>\n\n\n\n<li><code>$(Build.BuildNumber)<\/code>\u00a0: nom du build termin\u00e9. Vous pouvez configurer le format, mais par d\u00e9faut, le num\u00e9ro de build inclut la\u00a0<strong>date actuelle<\/strong>\u00a0suivie du\u00a0<strong>num\u00e9ro de build du jour<\/strong>. Exemple :\u00a0<code>\"20190329.1\"<\/code>.<\/li>\n<\/ul>\n\n\n\n<p>Vous pouvez \u00e9galement&nbsp;<strong>d\u00e9finir vos propres variables<\/strong>, ce que vous ferez bient\u00f4t.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Vous avez peut-\u00eatre aussi remarqu\u00e9 la t\u00e2che&nbsp;<code>UseDotNet@2<\/code><\/strong>, qui est la&nbsp;<strong>premi\u00e8re \u00e9tape de build<\/strong>.<\/h4>\n\n\n\n<p>Mara s\u2019est souvenue que le script de build n\u2019installait pas les outils n\u00e9cessaires.<br>Bien que l\u2019agent de build dispose de plusieurs versions du SDK .NET, cette t\u00e2che permet \u00e0 l\u2019auteur du pipeline de&nbsp;<strong>sp\u00e9cifier facilement la version<\/strong>&nbsp;\u00e0 utiliser sur l\u2019agent.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Depuis le terminal int\u00e9gr\u00e9<\/strong>, ex\u00e9cutez les commandes Git suivantes pour :<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Ajouter\u00a0<code>azure-pipelines.yml<\/code>\u00a0\u00e0 l\u2019index<\/li>\n\n\n\n<li>Valider la modification<\/li>\n\n\n\n<li>Pousser la modification sur GitHub<\/li>\n<\/ol>\n\n\n\n<p>Ces \u00e9tapes sont similaires \u00e0 celles que vous avez effectu\u00e9es pr\u00e9c\u00e9demment.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group has-background is-layout-constrained wp-block-group-is-layout-constrained\" style=\"background-color:#fcb90054\">\n<h3 class=\"wp-block-heading\">\ud83d\udca1&nbsp;<strong>Astuce<\/strong><\/h3>\n\n\n\n<p>Avant d\u2019ex\u00e9cuter ces commandes Git,\u00a0<strong>n\u2019oubliez pas d\u2019enregistrer<\/strong>\u00a0le fichier\u00a0<code>azure-pipelines.yml<\/code>.<\/p>\n<\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.75rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#24292e;--cbp-line-number-width:calc(1 * 0.6 * .75rem);line-height:1rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#f2f2f2;color:#2f363c\">Bash<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#24292e;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>git add azure-pipelines.yml\ngit commit -m \"Add build tasks\"\ngit push origin build-pipeline<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-light\" style=\"background-color: #fff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #6F42C1\">git<\/span><span style=\"color: #24292E\"> <\/span><span style=\"color: #032F62\">add<\/span><span style=\"color: #24292E\"> <\/span><span style=\"color: #032F62\">azure-pipelines.yml<\/span><\/span>\n<span class=\"line\"><span style=\"color: #6F42C1\">git<\/span><span style=\"color: #24292E\"> <\/span><span style=\"color: #032F62\">commit<\/span><span style=\"color: #24292E\"> <\/span><span style=\"color: #005CC5\">-m<\/span><span style=\"color: #24292E\"> <\/span><span style=\"color: #032F62\">&quot;Add build tasks&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #6F42C1\">git<\/span><span style=\"color: #24292E\"> <\/span><span style=\"color: #032F62\">push<\/span><span style=\"color: #24292E\"> <\/span><span style=\"color: #032F62\">origin<\/span><span style=\"color: #24292E\"> <\/span><span style=\"color: #032F62\">build-pipeline<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Cette fois-ci, vous poussez la branche&nbsp;<code>build-pipeline<\/code>, et non la branche&nbsp;<code>main<\/code>, vers GitHub.<\/h4>\n\n\n\n<p>Le&nbsp;<strong>push<\/strong>&nbsp;de la branche vers GitHub d\u00e9clenche le&nbsp;<strong>processus de build<\/strong>&nbsp;dans Azure Pipelines.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Dans Azure Pipelines, acc\u00e9dez \u00e0 votre build :<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Sur le c\u00f4t\u00e9 de la page, s\u00e9lectionnez\u00a0<strong>Pipelines<\/strong>.<\/li>\n\n\n\n<li>Puis s\u00e9lectionnez votre\u00a0<strong>pipeline<\/strong>.<\/li>\n<\/ol>\n\n\n\n<p>Vous verrez votre&nbsp;<strong>message de commit<\/strong>&nbsp;et que le build est en cours d\u2019ex\u00e9cution en utilisant le&nbsp;<strong>code de la branche&nbsp;<code>build-pipeline<\/code><\/strong>.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"798\" height=\"298\" data-src=\"https:\/\/techhub.saworks.io\/wp-content\/uploads\/2025\/08\/6-build-history.png\" alt=\"\" class=\"wp-image-7293 lazyload\" data-srcset=\"https:\/\/techhub.saworks.io\/wp-content\/uploads\/2025\/08\/6-build-history.png 798w, https:\/\/techhub.saworks.io\/wp-content\/uploads\/2025\/08\/6-build-history-300x112.png 300w, https:\/\/techhub.saworks.io\/wp-content\/uploads\/2025\/08\/6-build-history-768x287.png 768w\" data-sizes=\"(max-width: 798px) 100vw, 798px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 798px; --smush-placeholder-aspect-ratio: 798\/298;\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group has-background is-layout-constrained wp-block-group-is-layout-constrained\" style=\"background-color:#fcb90054\">\n<h3 class=\"wp-block-heading\">\ud83d\udca1&nbsp;<strong>Astuce<\/strong><\/h3>\n\n\n\n<p>Si vous ne voyez pas le build imm\u00e9diatement, attendez quelques instants ou&nbsp;<strong>actualisez la page<\/strong>.<\/p>\n<\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">S\u00e9lectionnez votre build, puis choisissez&nbsp;<strong>Jobs<\/strong>&nbsp;pour suivre l\u2019ex\u00e9cution des t\u00e2ches de build.<\/h4>\n\n\n\n<p>Par exemple, voici ce qui se passe lorsque la t\u00e2che&nbsp;<code>gulp@1<\/code>&nbsp;s\u2019ex\u00e9cute pour effectuer les t\u00e2ches Gulp qui&nbsp;<strong>minifient les fichiers JavaScript et CSS<\/strong>&nbsp;:<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"643\" height=\"469\" data-src=\"https:\/\/techhub.saworks.io\/wp-content\/uploads\/2025\/08\/6-gulp-task.png\" alt=\"\" class=\"wp-image-7295 lazyload\" data-srcset=\"https:\/\/techhub.saworks.io\/wp-content\/uploads\/2025\/08\/6-gulp-task.png 643w, https:\/\/techhub.saworks.io\/wp-content\/uploads\/2025\/08\/6-gulp-task-300x219.png 300w\" data-sizes=\"(max-width: 643px) 100vw, 643px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 643px; --smush-placeholder-aspect-ratio: 643\/469;\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Si une \u00e9tape \u00e9choue, vous verrez l\u2019erreur dans la sortie, ce qui vous permettra de&nbsp;<strong>diagnostiquer et corriger<\/strong>&nbsp;le probl\u00e8me.<\/h4>\n\n\n\n<p>Plus t\u00f4t, vous avez ex\u00e9cut\u00e9 une configuration de build plus minimale.<br>Cette fois-ci, lorsque le build se termine, vous voyez un&nbsp;<strong>ensemble plus complet de t\u00e2ches<\/strong>&nbsp;n\u00e9cessaires pour compiler l\u2019application.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"296\" height=\"556\" data-src=\"https:\/\/techhub.saworks.io\/wp-content\/uploads\/2025\/08\/6-add-build-tasks.png\" alt=\"\" class=\"wp-image-7297 lazyload\" data-srcset=\"https:\/\/techhub.saworks.io\/wp-content\/uploads\/2025\/08\/6-add-build-tasks.png 296w, https:\/\/techhub.saworks.io\/wp-content\/uploads\/2025\/08\/6-add-build-tasks-160x300.png 160w\" data-sizes=\"(max-width: 296px) 100vw, 296px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 296px; --smush-placeholder-aspect-ratio: 296\/556;\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Une fois le build termin\u00e9, s\u00e9lectionnez n\u2019importe quelle \u00e9tape pour voir la&nbsp;<strong>progression globale<\/strong>&nbsp;du build.<\/h4>\n\n\n\n<p>\u00c0 partir de l\u00e0, vous pouvez acc\u00e9der aux&nbsp;<strong>journaux de build<\/strong>&nbsp;ou \u00e0 la&nbsp;<strong>modification associ\u00e9e sur GitHub<\/strong>.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"970\" height=\"653\" data-src=\"https:\/\/techhub.saworks.io\/wp-content\/uploads\/2025\/08\/6-build-summary.png\" alt=\"\" class=\"wp-image-7299 lazyload\" data-srcset=\"https:\/\/techhub.saworks.io\/wp-content\/uploads\/2025\/08\/6-build-summary.png 970w, https:\/\/techhub.saworks.io\/wp-content\/uploads\/2025\/08\/6-build-summary-300x202.png 300w, https:\/\/techhub.saworks.io\/wp-content\/uploads\/2025\/08\/6-build-summary-768x517.png 768w\" data-sizes=\"(max-width: 970px) 100vw, 970px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 970px; --smush-placeholder-aspect-ratio: 970\/653;\" \/><\/figure>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Choisissez votre environnement de d\u00e9veloppement pour le module de formation. \u00c0 ce stade, Mara a d\u00e9fini une configuration de build pour le site [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":7024,"menu_order":37,"comment_status":"closed","ping_status":"closed","template":"","doc_tag":[],"doc_badge":[],"class_list":["post-7286","docs","type-docs","status-publish","hentry"],"author_avatar":"https:\/\/secure.gravatar.com\/avatar\/6a70e7c73db9f245e650948d09d74f61?s=96&d=mm&r=g","author_name":"Annick N'dri","_links":{"self":[{"href":"https:\/\/techhub.saworks.io\/fr\/wp-json\/wp\/v2\/docs\/7286"}],"collection":[{"href":"https:\/\/techhub.saworks.io\/fr\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/techhub.saworks.io\/fr\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/techhub.saworks.io\/fr\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/techhub.saworks.io\/fr\/wp-json\/wp\/v2\/comments?post=7286"}],"version-history":[{"count":0,"href":"https:\/\/techhub.saworks.io\/fr\/wp-json\/wp\/v2\/docs\/7286\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/techhub.saworks.io\/fr\/wp-json\/wp\/v2\/docs\/7024"}],"wp:attachment":[{"href":"https:\/\/techhub.saworks.io\/fr\/wp-json\/wp\/v2\/media?parent=7286"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/techhub.saworks.io\/fr\/wp-json\/wp\/v2\/doc_tag?post=7286"},{"taxonomy":"doc_badge","embeddable":true,"href":"https:\/\/techhub.saworks.io\/fr\/wp-json\/wp\/v2\/doc_badge?post=7286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}