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

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

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

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

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

Для начала вам нужно, чтобы в вашей системе были установлены Node, NPM (Node Package Manager) и CLI (интерфейс командной строки) соответствующего инструмента сборки. Если вы не уверены, что все это установлено, проверить это так же просто, как набирать командные строки.

Я также предполагаю, что файлы и каталоги в вашем проекте находятся на своем месте, включая конфиг файл, такой как 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 ('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:'ressed ')) .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
• Битва сценариев сборки: Gulp vs Grunt

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

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

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

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

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

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

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

Запустите командную палитру и выберите “Настройте Runner задач”. Visual Studio Code предоставит список поддерживаемых инструментов сборки. В этом случае мы выбираем “Глоток”, так как это тот, который мы используем в нашем проекте в этой статье.

Visual Studio Code теперь должен был создать новый файл с именем 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"], "tasks": ["taskName": " default "," isBuildCommand ": true,]

TASKNAME указывает название задачи в нашем gulpfile.js что мы хотели бы бежать. isBuildCommand свойство определяет дефолт команда как “строить” команда. Теперь вместо того, чтобы обходить командную палитру, вы можете просто нажать комбинацию клавиш Shift + Cmd + B.

Вы также можете выбрать “Запустить задачу сборки” результатов поиска задач в палитре команд.

Завершение

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

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

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

• Visual Studio Code: 5 потрясающих функций, которые делают его лидером
• Как настроить код Visual Studio
• 8 мощных расширений кода Visual Studio для интерфейсных разработчиков
• Код Visual Studio: повышение производительности с помощью управления связыванием ключей
• Влияние Microsoft Inclusive Design в коде Visual Studio