Comment automatiser des tâches dans du code Visual Studio

L’utilisation d’un outil de construction tel que Grunt ou Gulp peut vous faire gagner beaucoup de temps lors de la phase de développement. automatiser quelques répétitions “les tâches”. Si vous optez pour Visual Studio Code comme éditeur de code de référence, votre flux de travail pourrait être encore plus simple et, éventuellement, plus productif..

Construit avec Node.js à la base, Visual Studio Code vous permet de: exécuter les tâches sans quitter la fenêtre de l'éditeur. Et nous allons vous montrer comment faire dans ce post.

Commençons.

Conditions préalables

Pour commencer, vous devez avoir Node, NPM (Node Package Manager) et l'interface de ligne de commande (CLI (Command Line Interface)) de l'outil de construction correspondant tous installés sur votre système. Si vous ne savez pas si tous ces éléments sont installés, vous pouvez le vérifier en tapant simplement les lignes de commande..

Je supposerai également que les fichiers et les répertoires de votre projet sont à leur place, y compris la config fichier, tel que le gulpfile.js ou Gruntfile.js si vous utilisez Grunt à la place. Et dépendances de projet enregistrées dans package.json devrait également être installé à ce stade.

Vous trouverez ci-dessous nos répertoires et fichiers de projet, créés dans le but de manifestation dans cet article. Votre projet serait certainement très différent. vous pouvez avoir plus ou moins de fichiers.

. Css sass gulpfile.js s index.html ml js src ├── module_noeud_package.json

Nous utilisons Gulp comme outil de construction dans notre projet. Nous avons un certain nombre de tâches enregistrées dans le gulpfile.js comme suit:

 var gulp = require ('gulp'); var uglify = require ('gulp-uglify'); var sass = require ('gulp-sass'); var jsSrc = './js/src/**/*.js'; var sassSrc = './css/sass/**/*.scss'; gulp.task ('scripts', function () return gulp.src (jsSrc) .pipe (uglify ()) .pipe (gulp.dest ('./js'))); gulp.task ('styles', function () return gulp.src (sassSrc) .pipe (sass (outputStyle: 'compressé')) .pipe (gulp.dest ('./css'));) ; gulp.task ('automate', function () gulp.watch ([sassSrc, jsSrc], ['scripts', 'styles']);); gulp.task ('default', ['scripts', 'styles', 'automatate']);

Il y a spécifiquement quatre tâches que nous avons spécifiées:

des scripts: la tâche qui compilera nos fichiers JavaScript et réduira la sortie via le plugin Gulp UglifyJS.
modes: la tâche qui compilera nos fichiers SCSS en CSS et compressera la sortie.
automatiser: la tâche qui automatisera le modes et des scripts tâche si le gouffre intégré regarder utilitaire.
défaut: la tâche qui exécutera les trois tâches susmentionnées en même temps.

L’outil de construction de notre projet étant entièrement préparé, nous pouvons maintenant également automatiser les tâches que nous avons définies au sein de la bibliothèque. gulpfile.js.

Toutefois, au cas où vous ne maîtriseriez pas l’un des outils mentionnés, je vous recommande vivement de consulter quelques-uns de nos précédents articles pour vous familiariser davantage avec le sujet avant de poursuivre..

Comment utiliser Grunt pour automatiser votre flux de travail
Débuter avec Gulp.js
La bataille des scripts de construction: Gulp vs Grunt

Exécuter et automatiser des tâches

Lancer et automatiser “les tâches” dans Visual Studio Code est assez simple. Tout d’abord, lancez le Palette de commande en appuyant sur la combinaison de touches Maj + Cmd + P ou via la barre de menus, Affichage> Palette de commandes si c'est plus pratique pour vous. Ensuite, tapez les tâches, et sélectionnez “Tâches: Exécuter la tâche” parmi le petit nombre d'options affichées dans le résultat.

Le code de Visual Studio est intelligent; il sait que nous utilisons Gulp, ramasser gulpfile.js, et révéler la liste des tâches que nous avons définies dans le fichier.

Liste des tâches enregistrées dans `gulpfile.js`

Ici, sélectionnons le défaut Tâche. Les feuilles de style SCSS et le fichier JavaScripts seront compilés lors de la sélection de cette tâche, ce qui déclenchera également la automatiser Tâche qui permettra au modes et des scripts Tâche à exécuter de manière autonome pour aller de l'avant.

Lorsque vous modifiez un fichier - une feuille de style ou un fichier JavaScript - il sera automatiquement compilé. Visual Studio Code génère également des rapports opportuns pour chaque succès et chaque erreur rencontré lors de la création..

Intégration Profonde

De plus, nous pouvons intégrer notre projet dans Visual Studio Code pour rationaliser notre flux de travail. Et intégrer nos tâches dans Visual Studio Code est simple et rapide..

Lancez la palette de commandes et sélectionnez “Configurer le coureur de tâches”. Visual Studio Code donnera une liste des outils de construction qu’il prend en charge. Dans ce cas, nous sélectionnons “Gorgée”, puisque c'est celui que nous utilisons dans notre projet dans cet article.

Le code Visual Studio doit maintenant avoir créé un nouveau fichier nommé tasks.json sous .vscode dans votre répertoire de projet. tasks.json, à ce stade, contient la configuration nue.

Et comme vous pouvez le voir ci-dessous, le les tâches propriété en est actuellement juste un tableau vide.

"version": "0.1.0", "commande": "gulp", "isShellCommand": true, "args": ["--no-color"], "tasks": []

Étendre la les tâches valeur comme suit.

"version": "0.1.0", "command": "gulp", "isShellCommand": true, "args": ["--no-color"], "tasks": ["taskName": " default "," isBuildCommand ": true,]

le Nom de la tâche spécifie le nom de la tâche dans notre gulpfile.js que nous aimerions courir. le isBuildCommand propriété définit la défaut commande en tant que “Construire” commander. Maintenant, plutôt que de faire le tour de la palette de commande, vous pouvez simplement appuyer sur la combinaison de touches Maj + Cmd + B.

Sinon, vous pouvez sélectionner le “Exécuter la tâche de construction” du résultat de la recherche de tâches dans la palette de commandes.

Emballer

Je pense que Visual Studio Code est un éditeur de code prometteur. Il est rapide et construit avec quelques fonctionnalités pratiques prêtes à l'emploi, y compris celle que nous avons présentée dans cet article..

Nous avons vu comment exécuter une tâche à partir de Gulp; vous pouvez également utiliser Grunt à la place. Nous avons vu comment intégrer la tâche à Visual Studio Code et s’exécuter avec une combinaison de touches, ce qui rend notre flux de travail plus simple..

J'espère que vous trouverez cet article utile en tant que référence pour l'exécution de tâches de génération, et n'oubliez pas de consulter nos articles précédents pour plus de conseils pour tirer le meilleur parti de Visual Studio Code..

Code Visual Studio: 5 fonctionnalités impressionnantes qui en font un favori
Comment personnaliser le code Visual Studio
8 puissantes extensions de code Visual Studio pour les développeurs front-end
Code Visual Studio: Augmentation de la productivité via la gestion des liaisons de clés
L'influence de Microsoft Inclusive Design dans Visual Studio Code