Utilisation de Git dans Dreamweaver

Dreamweaver prend en charge Git, un système open source distribué de contrôle de version, pour gérer le code source. Avec l’intégration de Git dans Dreamweaver, vous pouvez travailler indépendamment sur votre code de n’importe où, puis ensuite fusionner vos modifications vers un référentiel Git central. Git vous aide à suivre toutes les modifications dans un fichier, et vous permet également de revenir aux versions précédentes.

Les référentiels Git sont également utiles lorsque vous travaillez en équipe, car Git vous permet de créer et de gérer facilement des branches. Par exemple, si vous êtes un concepteur et souhaitez modifier la conception de votre site. Si un autre membre de l'équipe prend en charge les demandes de modification pour le même site en même temps, vous pouvez tous les deux travailler indépendamment avec Git. Dans ce cas, vous pouvez, tous les deux, créer une branche et apporter vos modifications désirées dans votre référentiel local respectif. Le référentiel local contient l’historique complet de tous les changements que vous avez apportés à la source. Vous pouvez interrompre et fusionner les modifications avec le référentiel central à tout moment. La fusion garantit que le référentiel central dispose toujours du dernier code avec vos changements et ceux de votre collègue.

Lisez ce qui suit pour savoir comment commencer à utiliser Git dans Dreamweaver.

Si vous êtes un nouvel utilisateur Git, vous devez d’abord charger un client Git et créer un compte Git. Un client Git est essentiel avant d’utiliser Git à partir de Dreamweaver.

Si vous êtes un utilisateur qui possède déjà un compte Git, connectez-vous à votre compte. Assurez-vous d’avoir téléchargé le client Git sur votre système. 

Pour commencer à utiliser Git dans Dreamweaver, procédez comme suit :

Le panneau Git

Il est recommandé d’installer le client Git avec les paramètres de configuration par défaut. Dreamweaver sélectionne ensuite automatiquement le chemin d’accès au fichier exécutable.

Vous pouvez maintenant lancer Dreamweaver et associer votre site à un référentiel Git.

Dreamweaver prend en charge les opérations Git au travers du panneau Git (Windows > Git). En tant qu’utilisateur de Dreamweaver, vous pouvez utiliser ce panneau pour effectuer des opérations Git courantes comme valider, envoyer, récupérer et extraire.

Association de votre site à Git

Pour commencer à utiliser Git dans Dreamweaver, vous devez d’abord associer votre site Dreamweaver à un référentiel Git. Un référentiel Git est comme un dossier que vous créez pour vous aider à suivre les modifications apportées aux fichiers. Vous pouvez avoir un nombre quelconque de référentiels Git sur votre ordinateur. Chaque référentiel sur votre système est indépendant. Autrement dit, les modifications enregistrées dans un référentiel Git n’affectent pas le contenu d’un autre.

Vous pouvez associer votre site web à un référentiel soit en créant un référentiel soit en clonant un référentiel existant. Lorsque vous initialisez ou créez un référentiel, un référentiel Git vide est créé dans votre référentiel de travail actuel, avec un fichier .gitignore dans le dossier.

Toutefois, lorsque vous créez un clone à partir d’un référentiel Git existant, tous les fichiers de votre référentiel parent sont clonés dans votre système local.

Lisez ce qui suit pour savoir comment initialiser un référentiel Git ou cloner un référentiel.

Initialisation d’un référentiel Git

Lorsque vous commencez à travailler avec Git dans Dreamweaver, vous devez commencer par créer un nouveau référentiel. Lorsque vous initialisez un référentiel Git pour votre site, vous créez un référentiel Git où vous pouvez ajouter les fichiers associés à votre site Dreamweaver.

Clonage d’un référentiel existant

Si vous travaillez déjà avec un référentiel Git existant hébergé sur Github ou Bitbucket ou d’autres services d’hébergement, vous pouvez procéder comme suit pour cloner le référentiel directement à partir de Dreamweaver. Lorsque vous clonez un référentiel existant, vous créez une copie du référentiel cible dans votre système local.

Utilisation de Git pour le contrôle de version

Maintenant que vous avez associé votre site Dreamweaver à un référentiel Git, vous pouvez visualiser les fichiers dans Git à partir du panneau Fichiers (vue Git). Git classe les fichiers dans votre référentiel local en différentes catégories :

• Fichiers non suivis : fichiers que vous n’avez pas validés vers le référentiel Git, même une seule fois. Après avoir initialisé un référentiel Git, les fichiers ne sont pas suivis jusqu’à ce que vous les validiez.
• Fichiers non modifiés : fichiers qui ne sont pas modifiés.
• Fichiers modifiés : fichiers qui sont modifiés.
• Fichiers préparés : fichiers qui sont modifiés et prêts à être validés.

À l’aide de Git, vous pouvez suivre les modifications des fichiers. Lorsque vous modifiez les fichiers dans votre système local, les fichiers modifiés s’affichent dans une couleur différente dans le panneau Fichiers. Lorsque vous double-cliquez sur le fichier et l’ouvrez en mode Code, vous pouvez également voir la marque de gouttière contre les lignes qui ont été modifiées. Vous pouvez continuer et valider vos fichiers modifiés dans Git pour synchroniser les modifications.

Lorsque vous validez vos fichiers, Git vous permet d’entrer des messages de journal pour chaque validation et d’examiner les modifications à l’aide de la fonction diff. Vous pouvez également afficher l’historique des versions pour chaque fichier et pour le référentiel entier.

Lisez ce qui suit pour savoir comment suivre vos modifications dans Dreamweaver et valider vos modifications Git.

Suivi des modifications dans Git

Dans le panneau Fichiers de Dreamweaver, observez l’icône Git qui vous permet de basculer entre la vue FTP et la vue Git. Cliquez sur l’icône Git pour basculer la vue Git.

Si vous avez initialisé un référentiel Git et n’avez pas validé vos fichiers, ces derniers restent non suivis. Cependant, si vous aviez validé vos fichiers après l’initialisation de votre référentiel, Git reconnait ces fichiers.

Si vous aviez cloné tous vos fichiers à partir d’un autre référentiel, les fichiers sont à nouveau reconnus par Git.

Lorsque vous modifiez un fichier et cliquez sur Enregistrer, le panneau Fichiers affiche les fichiers modifiés dans une autre couleur. Double-cliquez sur le fichier modifié pour afficher les modifications exactes dans le mode Code.

Une marque de gouttière indique les lignes où des modifications ont été effectuées. Les marques de gouttière en vert indiquent le nouveau code qui a été ajouté. Les marques de gouttière en jaune affichent le code modifié, tandis que les marques de gouttière en rouge désignent une ligne de code qui a été supprimée.

Lorsque vous cliquez sur la marque de gouttière jaune, l'application affiche le changement dans le code. La ligne de code supprimée s'affiche en rouge et le code ajouté apparaît en vert.

Vous pouvez remarquer la présence d’un symbole R dans l’angle gauche des lignes de code supprimées. Pour rajouter le code supprimé à votre fichier, cliquez sur ce symbole R.

Utilisez les marques de gouttière pour visualiser le comparatif et vérifier la pertinence de vos modifications avant de les valider dans le référentiel Git.

Affichage du comparatif des fichiers modifiés

Lorsque vous ouvrez le panneau Git, vous pouvez voir la liste des fichiers modifiés. Vous pouvez cliquer sur un fichier dans la liste et afficher les modifications apportées au fichier après la précédente validation (diff). Pour afficher le comparatif pour un fichier, effectuez l’une des opérations suivantes dans le panneau Git :

• Pour afficher les modifications apportées au niveau du fichier, cliquez sur chaque fichier. Les surbrillances rouges indiquent la version précédente, alors que les surbrillances vertes indiquent la modification que vous venez d’apporter.
• Sélectionnez le fichier pour lequel vous souhaitez consulter le comparatif. Cliquez sur  (icône Diff). La boîte de dialogue Git Diff s’affiche, présentant les modifications en surbrillance en rouge et vert.

Validation des modifications

Rétablissement des modifications

Si vous avez déjà validé vos modifications et souhaitez revenir à la version précédente d’un fichier, procédez comme suit :

Création de balises

Vous pouvez créer des balises à chaque fois que vous validez vos modifications dans Git. Vous pouvez utiliser des balises pour marquer des validations importantes. Par exemple, un archivage pour une modification importante demandée par votre client. Les balises agissent comme pointeur vers une validation spécifique.

Affichage de l’historique du fichier

Chaque fois que vous validez un fichier dans Git, vous pouvez afficher l’historique du fichier ainsi que les détails de la validation. Cette possibilité permet d’identifier les validations importantes, ainsi que les balises associées aux validations.

1. Dans le panneau Git, effectuez l’une des opérations suivantes :

• Sélectionnez le fichier requis, puis cliquez sur  (icône Afficher l’historique des fichiers).
• Cliquez avec le bouton droit sur le fichier dans le panneau Fichiers et sélectionnez Historique du fichier.

Le système affiche l’historique Git du fichier sélectionné. Vous pouvez également afficher les détails de la validation pour ce fichier à partir de la même boîte de dialogue.

Affichage de l’historique du référentiel

En plus de visualiser l’historique d’un fichier dans Git, vous pouvez également afficher les modifications apportées au niveau du référentiel. Vous pouvez afficher toutes les modifications et validations réalisées au niveau du référentiel. Pour visualiser l’historique du référentiel, effectuez les opérations suivantes :

Utilisation de Git pour la collaboration

L’une des caractéristiques les plus distinctes de Git consiste en les branches. Contrairement à la plupart des systèmes de contrôle de version, une branche Git peut être assimilée à une ligne indépendante de l’ensemble de votre code ou tous vos fichiers associés. Par défaut, votre référentiel comporte une branche appelée « gabarit ». La branche gabarit est la branche principale ou finale. Vous pouvez créer des branches à partir du gabarit et apporter des modifications à chacune des branches.

Vous pouvez également créer une branche à partir d’une autre branche, lorsque vous créez une copie de la branche parente. Vous pouvez travailler indépendamment sur les deux branches dans le même référentiel Git. Par exemple, vous pouvez travailler sur une nouvelle fonctionnalité pour votre site sur une branche tout en traitant certaines demandes de modification dans une autre branche.

Git vous permet également de fusionner des branches si vous souhaitez incorporer les modifications de votre branche actuelle vers une branche cible. Lorsque vous fusionnez deux branches, les deux branches continuent d’exister indépendamment. Vous pouvez continuer à travailler avec les branches parente et cible.

Dans Dreamweaver, lorsque des développeurs et designers travaillent ensemble pour un site, chaque utilisateur peut créer une branche à partir du gabarit et effectuer des modifications indépendamment. Au besoin, ils peuvent facilement fusionner leurs modifications avec une autre branche et continuer à travailler avec les deux branches.

Pour en savoir plus sur la création et la gestion de branches dans Git, consultez les sections suivantes :

Création de branches dans Git

Fusion de branches

Utilisation de référentiels distants

Les référentiels distants dans Git sont des versions d’un projet qui sont hébergées sur un autre réseau. Vous pouvez accéder à des référentiels distants en créant une connexion avec le référentiel. En fonction des droits d’accès spécifiés dans le référentiel distant, vous pouvez disposer d’un accès en lecture seule ou d’un accès en écriture à ce référentiel.

Lorsque vous travaillez dans une équipe, les référentiels distants vous aident à envoyer et récupérer des données vers et depuis d’autres référentiels. Dans le panneau Git de Dreamweaver, vous pouvez créer une connexion distante et effectuer plusieurs opérations Git telles que Fetch, Git Push, Git Pull et Remote Refresh.

Pour apprendre à créer et gérer des référentiels distants, lisez les procédures suivantes.

Ajout d’un référentiel distant

Vous pouvez ajouter un référentiel distant pour partager des fichiers, la progression de votre travail, ainsi que pour accéder aux fichiers de votre projet hébergés dans un autre réseau. En ajoutant un référentiel distant, vous établissez une connexion à distance avec le référentiel cible. Dreamweaver vous permet de créer des référentiels distants à partir du panneau Git.

Avant d’ajouter un référentiel distant, assurez-vous que l’autre référentiel dispose de paramètres publics activés.

Gestion de référentiels distants

Une fois que vous avez ajouté un référentiel distant et établi une connexion, vous pouvez extraire et récupérer les fichiers du référentiel distant vers votre référentiel local. Vous pouvez également envoyer vos fichiers vers le référentiel distant. Toutefois, vous devez d’abord récupérer des fichiers du référentiel distant avant d’effectuer une action Git Push pour la première fois.

N’oubliez pas de valider tous les fichiers dans le référentiel local avant de tenter d’envoyer vos fichiers. Si votre référentiel local comporte des fichiers préparés, l’action Git Push reste infructueuse 

Vous pouvez effectuer les opérations Git suivantes à partir de Dreamweaver :

Fetch all

Cliquez sur  pour extraire tous les fichiers de toutes vos connexions distantes. Il est recommandé d’exécuter une action Git Fetch avant d’exécuter une opération Git Push ou Git Pull. Cette action extrait uniquement les fichiers depuis des référentiels distants, et ne modifie pas votre référentiel local.

Récupération de fichiers depuis référentiel distant

Vous pouvez récupérer des modifications depuis un référentiel unique ou depuis un groupe de référentiels. Lorsque vous cliquez sur l’icône Git Pull, le système affiche la boîte de dialogue Git Pull avec diverses options.

Envoi de fichiers au référentiel distant

Après avoir établi une connexion avec des référentiels distants, lorsque vous modifiez et validez les fichiers modifiés, Git enregistre ces modifications. L’icône Git Push  dans le panneau Git affiche immédiatement le nombre de fichiers qui ont été modifiés. Ces fichiers peuvent maintenant être envoyés au référentiel distant.

Lorsque vous exécutez une action Git Push, les validations que vous avez apportées au référentiel local sont envoyées au référentiel distant.

Pour envoyer vos fichiers directement depuis Dreamweaver :

Recherche de fichiers dans le panneau Git

La barre de recherche dans le panneau Git vous permet de rechercher des fichiers à l’aide du nom de fichier. Cette fonctionnalité est particulièrement utile si vous disposez d’un grand nombre de fichiers associés à votre site.

Pour rechercher un fichier, entrez simplement son nom dans la barre de recherche. Le ou les fichiers contenant votre requête de recherche s’affichent immédiatement.

Ajout de fichiers à la liste ignore

Lorsque vous ne souhaitez pas que Git agisse sur un fichier, vous pouvez ajouter le fichier à .gitignore. Git ignore les fichiers de ce dossier à chaque fois que vous effectuez toute action, notamment validation, envoi et récupération. Vous devez valider le fichier .gitignore dans votre référentiel de sorte que tout autre utilisateur clonant votre référentiel soit également au courant des fichiers du dossier .gitignore.

Pour ajouter des fichiers au dossier .gitignore, accédez au panneau Fichiers dans Dreamweaver. Sélectionnez et cliquez avec le bouton droit sur le fichier que vous souhaitez que Git ignore, puis sélectionnez Git > Ajouter à .gitignore.

À tout moment, si vous souhaitez retirer un fichier du dossier .gitignore, sélectionnez le fichier dans le panneau Fichiers. Cliquez avec le bouton droit et sélectionnez Git > Retirer de .gitignore.

Assurez-vous de valider le fichier .gitignore dans les référentiels local et distant après la modification de ce fichier.

Accès à Git au travers de la ligne de commande

Dans les sections précédentes de cet article, vous avez appris à utiliser le panneau Git (interface utilisateur) pour exécuter des tâches telles que l’association d’un référentiel Git à votre site, la création et la gestion de connexions à distance, l’envoi de fichiers vers un référentiel ou encore l’extraction de fichiers depuis un référentiel. Vous pouvez également effectuer ces actions et bien d’autres à l’aide de commandes git.

Pour réaliser une opération Git à l’aide du terminal, effectuez l’une des opérations suivantes :

• Cliquez sur Windows > Git, puis cliquez sur l’icône Ouvrir la console Bash/Terminal.
• Dans le panneau Fichiers, basculez la vue Git. Cliquez sur l’icône Ouvrir fenêtre Git en regard de la liste déroulante de référentiels.

Pour afficher les commandes Git courantes, consultez l’Aide-mémoire Git. 

Lorsque vous effectuez certaines opérations telles que l’initialisation d’un référentiel Git à partir de la ligne de commande, ces actions sont également reflétées dans l’interface Dreamweaver.

Cependant, vous pouvez également modifier des fichiers à l'aide de la ligne de commande lorsque l'application Dreamweaver est fermée. Dans ce cas, le message suivant apparaîtra la prochaine fois que vous lancerez Dreamweaver :

Définition de préférences Git dans Dreamweaver

Les préférences Git dans Dreamweaver vous permettent de définir des paramètres pour l’utilisation de Git dans Dreamweaver. Vous pouvez utiliser la boîte de dialogue Préférences pour définir des préférences Git comme le chemin d’accès au terminal, des paramètres de délai, et ainsi de suite.