Как да автоматизираме задачите в Visual Studio Code

Използването на инструмент за изграждане като Grunt или Gulp може да ви спести много време от етапа на разработване автоматизиране на няколко повтарящи се “Задачи”. Ако изберете код за Visual Studio като редактор за преходен код, вашият работен процес може да бъде още по-рационален и в крайна сметка да бъде по-продуктивен.

Създаден с Node.js в основата си, Visual Studio Code ви позволява изпълнете задачите, без да се налага да напускате прозореца на редактора. И ще ви покажем как да направите това в този пост.

Нека да започнем.

Предварителни условия

Като начало, трябва да имате Node, NPM (Node Package Manager) и CLI (Command Line Interface) на съответния инструмент за изграждане, инсталиран във вашата система. Ако не сте сигурни дали сте инсталирали всички тези програми, проверката е толкова лесно, колкото въвеждането на командните редове.

Предполагам също, че файловете и директориите във вашия проект са на тяхното подходящо място, включително конфигурационния файл, като например gulpfile.js или Gruntfile.js ако вместо това използвате Grunt. И зависимите от проекта регистрирани в package.json трябва да се инсталира и на този етап.

По-долу са нашите директории и файлове на проекта, създадени за целите на демонстрация в тази статия. Вашият проект със сигурност ще бъде много по-различен; може да имате повече или по-малко файлове.

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

Ние използваме Gulp като наш инструмент за изграждане в нашия проект. Имаме няколко задачи, регистрирани в gulpfile.js както следва:

 var gulp = require ("глътка"); 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', функция () 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 файлове, както и minifiy изхода чрез Gulp UglifyJS плъгин.
стилове: задачата, която ще компилира нашите SCSS файлове в CSS, както и компресиране на изхода.
автоматизирам: задачата, която ще автоматизира стилове и скриптове задача, въпреки че вградената глътка гледам полезност.
по подразбиране: задачата, която ще изпълни трите посочени по-горе задачи едновременно.

Тъй като инструментът за изграждане в нашия проект е подготвен, сега можем да продължим да автоматизираме тези задачи, които сме дефинирали в рамките на gulpfile.js.

Въпреки това, в случай, че не сте запознати с работата с някое от споменатите инструменти, силно ви препоръчвам да разгледате някои от предишните ни публикации, за да се запознаете с темата, преди да продължите напред.

Как да използвате Grunt за автоматизиране на вашия работен процес
Първи стъпки с Gulp.js
Битката за строеж на скриптове: Gulp vs Grunt

Стартирайте и автоматизирайте задачите

Работа и автоматизация “Задачи” в Visual Studio Code е доста лесно. Първо, стартирайте Командна палитра чрез натискане на комбинацията клавиши Shift + Cmd + P или през лентата на менюто, Преглед> Палитра за командите ако това е по-удобно за вас. След това въведете Задачи, и изберете “Задачи: Изпълнение на задача” от малкото опции, показани в резултата.

Кодът на Visual Studio е умен; знае, че използваме Гълф, вдигаме gulpfile.js, и разкрийте списъка с задачи, които сме дефинирали във файла.

Списък на регистрираните задачи `gulpfile.js`

Тук, нека да изберем по подразбиране Задача. SCSS стиловите таблици и JavaScripts файла ще бъдат компилирани при избора на тази задача и тя също ще задейства автоматизирам Задача, която ще позволи на стилове и скриптове Задача да се изпълнява самостоятелно напред.

При смяна на файл - стилов лист или JavaScript файл - той ще бъде автоматично компилиран. Visual Studio Code също генерира навременни отчети за всеки успех и грешки, които възникват в операцията за изграждане.

Дълбока интеграция

Освен това, можем да интегрираме нашия проект в Visual Studio Code, за да рационализираме нашия работен поток. А интегрирането на нашите задачи в Visual Studio Code е лесно и бързо.

Стартирайте командната палитра и изберете “Конфигуриране на изпълнител на задачи”. Visual Studio Code ще даде списък с инструмента за изграждане, който поддържа. В този случай избираме “глътка”, тъй като това е тази, която използваме в нашия проект в тази статия.

Кодът на 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": " по подразбиране "," isBuildCommand ": true,]

Най- taskName посочва името на задачата в нашата gulpfile.js които бихме искали да изпълним. Най- isBuildCommand собственост определя по подразбиране команда като “Изграждане” команда. Сега, вместо да заобикаляте командната палитра, можете просто да натиснете клавишната комбинация Shift + Cmd + B.

Алтернативно можете да изберете “Изпълнете задача за изграждане” на резултатите от търсенето на задачите в командната палитра.

Обобщавайки

Мисля, че Visual Studio Code е редактор на кодове с голямо бъдеще. Той е бърз и изграден с някои удобни функции от кутията, включително и тази, която сме показали в тази статия.

Видяхме как да стартираме задача от Gulp; можете също да използвате Grunt. Видяхме как да интегрираме задачата в Visual Studio Code и да стартираме с комбинация от клавиши, което прави работата ни по-опростена.

Надяваме се, че тази статия е полезна за справка за изпълнението на задачи за изграждане и не забравяйте да проверите нашите предишни статии за още съвети, за да извлечете максимална полза от кода на Visual Studio.

Код на Visual Studio: 5 Страхотни функции, които го правят Frontrunner
Как да персонализирате Visual Studio Code
8 Мощни разширения за Visual Studio Code за Front-End разработчици
Код на Visual Studio: Увеличаване на производителността чрез управление на обвързването на ключове
Влиянието на Microsoft Inclusive Design в Visual Studio Code