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

Использование инструмента сборки, такого как хрюкать или Глоток может сэкономить вам много времени на этапе разработки, автоматизируя несколько повторяющихся «задач». Если вы выберете Visual Studio Code как редактор переходящего кода, ваш рабочий процесс может быть еще более упорядоченным и, в конечном итоге, более продуктивным.

Код Visual Studio, созданный на основе Node.js, позволяет выполнять задачи, не выходя из окна редактора. И мы покажем вам, как это сделать в этом посте.

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

Предпосылки

Для начала вам понадобятся Node, NPM (Node Package Manager) и CLI (интерфейс командной строки) соответствующего инструмента сборки, все установленные в вашей системе. Если вы не уверены, установлены ли все это, проверить это так же просто, как набирать командные строки.
Я также предполагаю, что файлы и каталоги в вашем проекте находятся на своем месте, включая конфиг файл, такой как gulpfile.js или Gruntfile.js, если вместо этого вы используете Grunt. И на этом этапе также должны быть установлены зависимости проекта, зарегистрированные в package.json.

Ниже приведены каталоги и файлы нашего проекта, созданные с целью демонстрация в этой статье. Ваш проект, безусловно, будет сильно отличаться; у вас может быть больше или меньше файлов.
,
├── css
Ass ├── sass
├── gulpfile.js
Index── index.html
├── js
│ ├── срк
Node── node_modules
Package── package.json
Мы используем Gulp в качестве нашего инструмента сборки в нашем проекте. У нас есть несколько задач, зарегистрированных в gulpfile.js следующим образом:

var gulp = require (‘gulp’);
var uglify = require (‘gulp-uglify’);
var sass = require (‘gulp-sass’);

var jsSrc = “https://www.hongkiat.com/./js/src//*.js”;
var sassSrc = ‘./css/sass//*.scss’;

gulp.task (‘scripts’, function () {
возврат gulp.src (jsSrc)
                .pipe (uglify ())
                .pipe (gulp.dest (‘./js’))
});

gulp.task (‘styles’, function () {
возврат gulp.src (sassSrc)
                .pipe (sass ({outputStyle: ‘сжатый’}))
                .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, а также сжимает вывод.
• автоматизировать: задача, которая будет автоматизировать задачу стилей и сценариев с помощью встроенной утилиты gulp watch.
• по умолчанию: задача, которая будет одновременно запускать три вышеупомянутые задачи.

Поскольку инструмент для сборки в нашем проекте уже подготовлен, теперь мы можем также продолжать автоматизировать эти задачи, которые мы определили в gulpfile.js.

Однако, если вы не знакомы с работой с любым из упомянутых инструментов, я настоятельно рекомендую вам изучить несколько наших предыдущих постов, чтобы познакомить вас с этой темой, прежде чем продолжить.

Запускать и автоматизировать задачи

Запускать и автоматизировать «Задачи» в коде Visual Studio довольно просто. Сначала запустите палитру команд, нажав комбинацию клавиш Shift + Cmd + P или через строку меню, Вид> Палитра команд, если это более удобно для вас. Затем введите «Задачи» и выберите «Задачи: Выполнить задачу» из нескольких вариантов, показанных в результате.
Палитра командКод Visual Studio умный; он знает, что мы используем Gulp, берём gulpfile.js и раскрываем список задач, которые мы определили в файле.
Список задач, зарегистрированных в gulpfile.jsЗдесь давайте выберем задание по умолчанию. Таблицы стилей SCSS и файл JavaScripts будут скомпилированы при выборе этой Задачи, и это также вызовет задачу Автоматизации, которая позволит Задаче стилей и сценариев работать автономно в будущем.

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

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

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

Запустите командную палитру и выберите «Настроить исполнитель задач». Visual Studio Code предоставит список поддерживаемых инструментов сборки. В этом случае мы выбираем «Gulp», так как именно это мы используем в нашем проекте в этой статье.
Visual Studio Code теперь должен был создать новый файл с именем tasks.json в .vscode в каталоге вашего проекта. tasks.json на данный момент содержит пустую конфигурацию.

И как вы можете видеть ниже, свойство задач в настоящее время это просто пустой массив.
{
“версия”: “0.1.0”,
“команда”: “глоток”,
“isShellCommand”: правда,
«арг»: [
“–no-color”
],
“задания”: []
}
Увеличьте значение задачи следующим образом.
{
“версия”: “0.1.0”,
“команда”: “глоток”,
“isShellCommand”: правда,
«арг»: [
“–no-color”
],
“задания”: [{
“taskName”: “default”,
“isBuildCommand”: true,
}]
}
TaskName указывает имя задачи в нашем gulpfile.js, которое мы хотели бы запустить. Свойство isBuildCommand определяет команду по умолчанию как команду «Build». Теперь вместо того, чтобы обходить командную палитру, вы можете просто нажать комбинацию клавиш Shift + Cmd + B.
В качестве альтернативы вы можете выбрать «Выполнить задачу сборки» из результатов поиска задач в палитре команд.

Завершение

Я думаю, что Visual Studio Code – это редактор кода с большим будущим. Он быстрый и построен с некоторыми удобными функциями из коробки, включая ту, которую мы показали в этой статье.

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

Надеемся, что вы найдете эту статью полезной в качестве справочника по выполнению задач сборки, и не забудьте ознакомиться с нашими предыдущими статьями, чтобы получить дополнительные советы по максимально эффективному использованию кода Visual Studio.