Automatiser les builds front-end avec un raccourci Windows / Blogs / Perficient

Si vous êtes un développeur front-end, vous savez que la création et le déploiement de votre code peuvent prendre du temps. Et si vous pouviez automatiser l’ensemble du processus en quelques clics ? Dans cet article de blog, nous allons vous montrer comment utiliser un raccourci Windows pour extraire la branche principale, nettoyer votre référentiel avec une extraction et une extraction, exécuter npm install, et développez votre front-end avec Gulp. Vous pouvez également le faire dans un script, mais j’ai commencé par le chemin du raccourci et je voulais voir jusqu’où je pouvais aller avec juste le raccourci.

Avant de commencer, voici ce dont vous aurez besoin :

• Un dépôt de code avec Gite installée.
• Node.js avec npm et npx installés.
• Un projet avec une version frontale. Dans cet exemple, nous utilisons Gorgée.

Pourquoi commencer à partir de la branche principale ?

Avant de plonger dans les détails techniques, il est important de noter pourquoi nous recommandons de commencer à partir de la branche principale lors de l’automatisation des builds frontaux. La branche principale (éventuellement nommée main ou un autre nom principal) est généralement la branche principale d’un référentiel et contient la version la plus à jour et la plus stable du code. En partant de la branche master, vous vous assurez de créer et de déployer la version la plus stable de votre code frontal.

Créer un nouveau raccourci

Pour créer un nouveau raccourci, faites un clic droit sur votre bureau et sélectionnez « Nouveau » > « Raccourci ».

Dans le champ « Démarrer dans », entrez le chemin d’accès au répertoire de votre projet. Ceci est important pour s’assurer que les commandes sont exécutées dans le bon répertoire.

Dans le champ « Target », entrez la commande suivante avec le « gulp build » reflétant quelle que soit votre commande de construction frontale :

cmd.exe /k git checkout master & git fetch & git reset --hard & git pull & npm install & npx gulp build

Cette commande fait beaucoup de choses, alors décomposons-la :

• cmd.exe est l’invite de commande Windows.
• /k indique à l’invite de commande d’exécuter la commande qui suit, puis de rester ouverte pour que vous puissiez voir la sortie.
• git checkout master vérifie le master branche de votre dépôt Git.
• & git fetch télécharge toutes les nouvelles modifications à partir du référentiel distant.
• & reset --hard est facultatif et effacera toutes les modifications en attente que vous pourriez avoir. Faire attention.
• & git pull apporte de nouvelles modifications dans votre référentiel local.
• & npm install installe tous les nouveaux packages spécifiés dans votre package.json déposer.
• & npx gulp build exécute le build tâche dans votre gulpfile.js.

Si vous devez exécuter des tâches supplémentaires, vous pouvez les ajouter à la fin de la commande, séparées par &.

Exécution du raccourci

Lorsque vous double-cliquez sur le raccourci, il ouvre une fenêtre d’invite de commande et navigue automatiquement vers le répertoire de votre projet. La première commande dans le champ « Cible » est git checkout masterqui extrait la branche master de votre projet.

Les trois commandes suivantes dans le champ « Cible » sont git fetch, git pullet npm install. Ces commandes récupèrent toutes les nouvelles modifications du référentiel distant, les extraient vers votre référentiel local et installent tous les nouveaux packages npm. Cela exécutera également le reset --hard a là-dedans si vous avez laissé cette commande facultative pour vous assurer que votre répertoire est propre.

C’est important de courir npm install après avoir extrait la branche principale pour vous assurer que vous disposez de tous les derniers packages de la package.json fichier installé. Cela garantit que votre processus de construction aura accès à toutes les dépendances nécessaires.

La dernière commande dans le champ « Cible » est npm gulp build, que j’utilise comme exécuteur de tâches pour l’un de mes projets, ce qui m’aide à exécuter diverses tâches. Si vous devez exécuter des tâches Gulp supplémentaires, ajoutez-les simplement au champ « Cible ».

Conclusion

En utilisant un raccourci Windows pour automatiser vos builds front-end, vous pouvez économiser beaucoup de temps et d’efforts dans votre workflow de développement lorsque vous commencez un nouveau travail. Commencer à partir de la branche master garantit que vous construisez et déployez la version la plus stable de votre code frontal et que vous exécutez npm install après avoir extrait la branche master, assurez-vous que tous les derniers packages sont installés. Avoir un outil pour le faire pour moi sans avoir à cliquer dans plusieurs fenêtres ou invites de commande a définitivement été une victoire.