Jak zautomatyzować zadania w kodzie Visual Studio

Używanie narzędzia do budowania, takiego jak Grunt lub Gulp, może zaoszczędzić dużo czasu na etapie tworzenia automatyzacja kilku powtarzalnych “Zadania”. Jeśli zdecydujesz się na kod Visual Studio jako edytor kodu przychodzącego, Twój przepływ pracy może być jeszcze bardziej usprawniony i ostatecznie bardziej wydajny.

Zbudowany w oparciu o Node.js, Visual Studio Code pozwala uruchom zadania bez konieczności opuszczania okna edytora. Pokażemy ci, jak to zrobić w tym poście.

Zaczynajmy.

Warunki wstępne

Na początek musisz mieć węzeł, NPM (Node Package Manager) i CLI (Command Line Interface) odpowiedniego narzędzia do budowania, które są zainstalowane w systemie. Jeśli nie masz pewności, czy wszystkie są zainstalowane, sprawdzenie ich jest tak proste, jak wpisanie linii poleceń.

Zakładam także, że pliki i katalogi w twoim projekcie znajdują się na właściwym miejscu, w tym pliki config plik, taki jak gulpfile.js lub Gruntfile.js jeśli zamiast tego użyjesz Grunta. I zależności projektu zarejestrowane w package.json należy również zainstalować w tym momencie.

Poniżej znajdują się nasze katalogi i pliki projektów, utworzone w celu a demonstracja w tym artykule. Twój projekt na pewno byłby inny; możesz mieć więcej lub mniej plików.

. Ss css │ ├── sass ├── gulpfile.js ├── index.html ├── js │ ├── src ├── node_modules └── package.json

Wykorzystujemy Gulp jako nasze narzędzie do budowania w naszym projekcie. Mamy kilka zadań zarejestrowanych w gulpfile.js następująco:

 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: 'compressed')) .pipe (gulp.dest ('./css'));) ; gulp.task ('automate', function () gulp.watch ([sassSrc, jsSrc], ['scripts', 'styles']);); gulp.task ('default', ['scripts', 'styles', 'automate']); 

Określone zostały cztery zadania:

• skrypty: zadanie, które skompiluje nasze pliki JavaScript, a także zminimalizuje dane wyjściowe za pomocą wtyczki Gulp UglifyJS.
• style: zadanie, które skompiluje nasze pliki SCSS do CSS, a także skompresuje dane wyjściowe.
• zautomatyzować: zadanie, które zautomatyzuje style i skrypty zadanie mimo wbudowanego łyka zegarek użyteczność.
• domyślna: zadanie, które uruchomi wszystkie trzy wymienione zadania jednocześnie.

Ponieważ narzędzie do budowania w naszym projekcie jest przygotowane, możemy teraz zautomatyzować te zadania, które zdefiniowaliśmy w gulpfile.js.

Jednak w przypadku, gdy nie jesteś zaznajomiony z jakimkolwiek z wymienionych narzędzi, gorąco polecam zapoznanie się z kilkoma naszymi poprzednimi postami, aby przejść do tematu, zanim przejdziesz dalej.

• Jak używać Grunt do automatyzacji pracy
• Pierwsze kroki z Gulp.js
• The Battle Of Build Scripts: Gulp vs Grunt

Uruchom i automatyzuj zadania

Uruchamianie i automatyzacja “Zadania” w Visual Studio Code jest całkiem prosty. Najpierw uruchom Paleta poleceń naciskając kombinację klawiszy Shift + Cmd + P lub przez pasek menu, Widok> Paleta poleceń jeśli jest to dla ciebie wygodniejsze. Następnie wpisz Zadania, i wybierz “Zadania: Uruchom zadanie” z kilku opcji pokazanych w wyniku.

Kod Visual Studio jest inteligentny; wie, że używamy Gulp, podnieś gulpfile.js, i ujawnij listę zadań, które zdefiniowaliśmy w pliku.

Tutaj wybierzmy domyślna Zadanie. Arkusze stylów SCSS i plik JavaScripts zostaną skompilowane po wybraniu tego zadania, a także uruchomią zautomatyzować Zadanie, które pozwoli style i skrypty Zadanie do samodzielnego uruchomienia w przyszłości.

Podczas zmiany pliku - arkusza stylów lub pliku JavaScript - zostanie on automatycznie skompilowany. Kod Visual Studio generuje również raporty na czas dla każdego sukcesu i błędów, które występują w operacji budowania.

Głęboka integracja

Ponadto możemy zintegrować nasz projekt z Visual Studio Code, aby usprawnić nasz przepływ pracy. Integracja naszych zadań w kodzie Visual Studio jest łatwa i szybka.

Uruchom paletę poleceń i wybierz “Skonfiguruj Runner zadań”. Program Visual Studio Code wyświetli listę obsługiwanych narzędzi do budowania. W tym przypadku wybieramy “Łyk”, ponieważ jest to ten, którego używamy w naszym projekcie w tym artykule.

Kod Visual Studio powinien teraz utworzyć nowy plik o nazwie tasks.json pod .vscode w katalogu projektu. tasks.json, w tym momencie zawiera nagą konfigurację.

I jak widać poniżej zadania właściwość jest obecnie pustą tablicą.

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

Przedłużyć zadania wartość w następujący sposób.

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

The Nazwa zadania określa nazwę zadania w naszym gulpfile.js że chcielibyśmy biec. The isBuildCommand właściwość definiuje domyślna polecenie jako “Budować” dowództwo. Teraz zamiast poruszać się po palecie poleceń, możesz po prostu nacisnąć kombinację klawiszy Shift + Cmd + B.

Alternatywnie możesz wybrać “Uruchom zadanie tworzenia” wyniku wyszukiwania zadań w palecie poleceń.

Zawijanie

Myślę, że Visual Studio Code to edytor kodu z wielką przyszłością. Jest szybki i zbudowany z kilkoma przydatnymi funkcjami po wyjęciu z pudełka, w tym jednym, który pokazaliśmy w tym artykule.

Widzieliśmy, jak uruchomić zadanie z Gulp; zamiast tego możesz użyć Grunta. Widzieliśmy, jak zintegrować zadanie z Visual Studio Code i uruchomić z kluczową kombinacją, która usprawnia nasz przepływ pracy.

Mamy nadzieję, że ten artykuł okaże się przydatny jako punkt odniesienia do uruchamiania zadań kompilacji i nie zapomnij sprawdzić naszych poprzednich artykułów, aby uzyskać więcej wskazówek, aby w pełni wykorzystać kod Visual Studio.

• Visual Studio Code: 5 niesamowitych funkcji, dzięki którym staje się liderem
• Jak dostosować kod Visual Studio
• 8 Wydajne rozszerzenia kodu Visual Studio dla programistów
• Kod Visual Studio: Zwiększanie produktywności za pomocą zarządzania kluczowymi powiązaniami
• Wpływ projektu Microsoft Inclusive Design na kod Visual Studio