Як автоматизувати завдання в коді Visual Studio

Використовуючи інструмент побудови, як Grunt або Gulp, ви можете заощадити багато часу на стадії розробки автоматизація декількох повторюваних “Завдання”. Якщо ви вибрали код Visual Studio як редактор коду для переходу, робочий процес може бути ще більш раціоналізованим і, зрештою, більш продуктивним.

Вбудований з Node.js за своєю суттю, код Visual Studio дозволяє вам виконайте завдання, не залишаючи вікна редактора. І ми покажемо вам, як це зробити на цій посаді.

Давайте почнемо.

Передумови

Почнемо з того, що вам потрібно мати Node, NPM (менеджер пакетів вузлів) і CLI (інтерфейс командного рядка) відповідного інструменту збирання, встановлених у вашій системі. Якщо ви не впевнені в тому, що всі ці програми встановлені, перевірте їх так само просто, як ввести командні рядки.

Я також припускаю, що файли та каталоги у вашому проекті знаходяться на своєму місці, включаючи config файлу, наприклад gulpfile.js або Gruntfile.js якщо ви використовуєте Grunt замість цього. І проектні залежності зареєстровані в package.json також слід встановити на цьому етапі.

Нижче наводяться каталоги і файли нашого проекту, створені з метою a демонстрація у цій статті. Ваш проект, безумовно, буде значно відрізнятися; Ви можете мати більше або менше файлів.

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

Ми використовуємо Gulp як інструмент побудови в нашому проекті. У нас є ряд завдань, зареєстрованих у gulpfile.js наступним чином:

 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']); 

Є конкретно чотири завдання, які ми вказали:

• сценарії: завдання, яке буде компілювати наші JavaScript файли, а також мінімізувати висновок через Gulp UglifyJS плагін.
• стилів: завдання, яке буде компілювати наші SCSS файли в CSS, а також стискати вивід.
• автоматизувати: завдання, яке буде автоматизувати стилів і сценарії завдання, хоча в вбудованому ковтку дивитися корисності.
• за замовчуванням: завдання, яке буде виконувати всі три зазначені завдання всі разом одночасно.

Оскільки підготувати інструмент побудови в нашому проекті, ми тепер можемо також автоматизувати ці завдання, які ми визначили в рамках проекту gulpfile.js.

Проте, якщо ви не знайомі з роботою з будь-яким із згаданих інструментів, я рекомендую ознайомитися з кількома попередніми посадами, щоб перейти до теми, перш ніж продовжити роботу.

• Як використовувати Grunt для автоматизації робочого процесу
• Початок роботи з Gulp.js
• Битва скріптів побудови: Ковчег проти Грунта

Запуск і автоматизація завдань

Запуск і автоматизація “Завдання” в Visual Studio Code досить просто. Спочатку запустіть Палітра команд натисканням комбінації клавіш Shift + Cmd + P або через рядок меню, Перегляд> Палітра команд якщо це зручніше для вас. Потім введіть Завдання, і виберіть “Завдання: Запуск завдання” з декількох варіантів, показаних в результаті.

Код Visual Studio розумний; він знає, що ми використовуємо Gulp, збираємо gulpfile.js, і відкрийте список завдань, які ми визначили у файлі.

Тут, давайте виберемо за замовчуванням Завдання. Таблиці стилів SCSS і файл JavaScripts будуть компілюватись після вибору цього завдання, і він також буде ініціювати автоматизувати Завдання, що дозволить стилів і сценарії Завдання виконується автономно вперед.

При зміні файлу - таблиці стилів або файлів JavaScript - його буде автоматично скомпільовано. Код Visual Studio також генерує своєчасні звіти для кожного успіху та помилок, які відбуваються в операції збирання.

Глибока інтеграція

Крім того, ми можемо інтегрувати наш проект у Visual Studio Code для оптимізації нашого робочого процесу. І інтеграція наших завдань в коді Visual Studio є простим і швидким.

Запустіть панель команд і виберіть “Налаштування бігуна завдань”. Код Visual Studio дасть список інструменту побудови, який він підтримує. У цьому випадку ми вибираємо “Залпа”, тому що в цій статті ми використовуємо цей проект.

Код Visual Studio тепер повинен створити новий файл з ім'ям tasks.json під .vscode у каталозі проекту. tasks.json, в цій точці міститься гола конфігурація.

І, як ви можете бачити нижче, завдання властивість в даний час є лише порожнім масивом.

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

Розширити завдання значення наступним чином.

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

The taskName вказує назву завдання в нашому gulpfile.js що ми хотіли б запустити. The isBuildCommand властивість визначає за замовчуванням як команда “Збірка” команду. Тепер, замість того щоб об'їжджати палітру команд, можна просто натиснути комбінацію клавіш Shift + Cmd + B.

З іншого боку, ви можете вибрати “Запустіть завдання збирання” результату пошуку Завдання в Палітрі команд.

Підведенню

Я думаю, що Visual Studio Code є редактором коду з великим майбутнім. Це швидко і побудований з деякими зручними функціями з коробки, включаючи той, який ми показали в цій статті.

Ми бачили, як запустити Task from Gulp; Ви також можете використовувати Grunt. Ми бачили, як інтегрувати завдання в Visual Studio Code і працювати з комбінацією клавіш, що робить наш робочий процес більш виваженим.

Сподіваємося, ви знайдете цю статтю корисною як довідник для виконання завдань збирання, і не забудьте ознайомитися з попередніми статтями, щоб отримати більше порад, щоб максимально використати код Visual Studio.

• Код Visual Studio: 5 Дивовижні функції, які роблять це Frontrunner
• Як налаштувати код Visual Studio
• 8 Потужні розширення коду Visual Studio для розробників інтерфейсу
• Код Visual Studio: Збільшення продуктивності за допомогою керування прив'язками ключів
• Вплив Microsoft Inclusive Design на Visual Studio Code