Сейчас веб-разработчики уже не могут обойтись без npm, Grunt и Gulp.
Вообще, эти инструменты настолько хороши, что грядущий релиз ASP.NET отказался от своей фирменной комплектации и диспетчеров задач в пользу широко используемых обществом инструментов. А теперь они являются главными элементами в Visual Studio и Visual Studio Code. Сегодня я покажу вам как использовать Gulp в Visual Studio Code, чтобы запустить следующие наиболее часто используемые задачи:
- Компиляция TypeScript в JavaScript
- Компиляция SCSS-файла в чистый CSS
- БОНУС - Добавление пары заданий для автоматического создания JS и CSS при изменения кода
Хотя Gulp является автономным инструментом, VS Code имеет отличную внешнюю поддержку для него. Это означает, что до тех пор, пока у вас есть gulpfile.js в корневом каталоге вашего проекта, VS-код будет использовать его для создания задач, доступных в IDE. Давайте начнем:
Создание проекта
Я предполагаю, что вы уже установили TypeScript и VSCode. Если нет, посмотрите здесь. Для создания проекта выберите нужное местоположение и создайте новый каталог по имени VSGulpTest
.
Инсталляция npm и Gulp
Начнем с начала. Npm - менеджер пакетов Node (отсюда и название) и для того, чтобы получить его вам нужно установить Node.js. Это можно сделать двумя способами:
- с помощью chocalateyNuget
choco install nodejs
- с помощью исполняемого файла, скаченного с официального сайта
Теперь нам ничто не мешает установить Gulp. Наберите в командной строке Node.js следующее: npm install --global gulp
и нажмите клавишу Enter для выполнения. Эта команда устанавливает Gulp глобально. Я cтараюсь избежать глобальных установок, но, установленный локально, Gulp не будет работать в Visual Studio Code. Все остальные пакеты будут установлены локально.
Далее, нам необходимо инициализировать npm на текущем проекте. Для этого откройте командную строку Node.js, перейдите в корневой каталог вашего проекта и выполните следующую команду: npm init
В результате в корневом каталоге вашего проекта будет создан файл package.json. Этот файл используется Node.js для отслеживания установленных пакетов. Командная строка проведет вас через последовательность вопросов (Wizard CLI) для того, чтобы сгенерировать параметры конфигурации. Ни один из этих параметров не является особенно важным, вы можете оставить все из них пустыми, или скопировать мои настройки. На последнем шаге просто наберите yes
для создания файла.
Установка необходимых пакетов
Gulp – это простой диспетчер задач, поэтому сам по себе он особо пользы не несет. Нам нужны плагины, чтобы помочь нам выполнить доставленные задачи, а именно: typescript, merge и sass. Чтобы установить плагины, вернитесь к командной строке Node.js, перейдите в корневой каталог вашего проекта, а затем выполните следующие команды, по одной за раз:
npm install gulp-sass --save-dev
npm install gulp-typescript
npm install merge2
Эти команды будут устанавливать необходимые плагины и ряд зависимостей. Эти плагины будут вызываться из Gulp для выполнения наших задач.
Добавляем код
Прямо сейчас наш проект пуст. Давайте добавим пару TypeScript файлов, файл Sass и HTML-файл, чтобы сделать набросок сайта. Создайте файлы animal.ts и human.ts и вставьте соответствующий код.
//animal.ts
class Animal {
name:string;
constructor(theName: string) { this.name = theName; }
move(meters: number = 0) {
alert(this.name + " пробежал " + meters + "м.");
}
}
//var testAnimal = new Animal(1234);
//human.ts
class Human {
name: string;
constructor (yourHumanName:string ){
this.name = yourHumanName;
}
callHuman = function(){
console.log('Привет, ' + this.name);
}
}
Создайте файл main.scss для CSS кода и файл index.html
для главной страницы сайта. И снова используйте код ниже, или добавьте свой собственный код в соответствующие файлы.
//main.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
$header-color: green;
body {
font: 100% $font-stack;
color: $primary-color;
h1{
font-family: $font-stack;
color: $header-color;
}
}
<!-- index.html -->
<html>
<head>
<script src="release/js/main.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<h1>Привет, мир!</h1>
<h2>Привет, помните меня?<h2>
</body>
</html>
Добавляем Gulp-таски
Пришло время соединить все вместе и получить рабочий сайт. В корневом каталоге вашего проекта создайте файл gulpfile.js и добавьте следующий код:
var gulp = require('gulp');
var ts = require('gulp-typescript');
var merge = require('merge2');
var sass = require('gulp-sass');
gulp.task('scripts', function() {
var tsResult = gulp.src('*.ts')
.pipe(ts({
declarationFiles: true,
noExternalResolve: true,
noImplicitAny: true,
out: 'main.js'
}));
return merge([
tsResult.dts.pipe(gulp.dest('release/definitions')),
tsResult.js.pipe(gulp.dest('release/js'))
]);
});
gulp.task('sass', function () {
gulp.src('*.scss')
.pipe(sass.sync().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
gulp.task('watch', function () {
gulp.watch('*.scss', ['sass']);
gulp.watch('*.ts', ['scripts']);
});
Я постараюсь кратко объяснить, что происходит в этом файле. В верхней части файла мы импортируем все плагины, после чего создаем 3 задачи:
- scripts
- компилит *.ts файлы в *.js, объединяет весь код в один файл, генерирует файлы (.d.ts) и сохраняет созданные файлы в указанном месте (
release
)
- sass
- компилит *.scss файлы в *.css и помещает созданный файл в указанном месте (
css
)
- watch
- мониторит изменение файлов *.scss и *.ts на наличие каких-либо изменений и автоматически выполняет соответствующую задачу
Теперь мы почти готовы к запуску. Находясь в Visual Studio Code, нажмите клавиши Ctrl+Shift+B
для определения нового диспетчера задач.
Нажмите на Настроить средство выполнения задач. Это выведет файл tasks.json. Удалите все, что в нем есть и добавьте следующий код:
{
"version": "0.1.0",
"command": "gulp",
"isShellCommand": true,
"args": [
"--no-color"
],
"tasks": [{
"taskName": "scripts",
"isBuildCommand": true,
"showOutput": "always"
},
{
"taskName": "sass",
"isBuildCommand": true,
"showOutput": "always"
},
{
"taskName": "watch",
"isBuildCommand": true,
"showOutput": "always"
}]
}
Этот код дает указание Visual Studio Code использовать Gulp в качестве главного диспетчера задач, а внутри мы объявляем 3 задачи, которые мы хотим сделать доступными для IDE. Они должны соответствовать задачам, определенным в файле gulpfile.js
. Вы всегда можете пропустить не нужные вам задачи, но любая новая задача должна быть определена в gulpfile.js первой.
Если вы нажмете клавиши Ctrl+Shift+P
и выберите Run Task (запуск задачи), перед вами будет раскрывающийся список задач, которые мы перечислили в файле tasks.json. Выберите таск watch
и запустите его. Вы заметите, что Окно Вывода (Output Window) находится в фокусе, а в нижнем левом углу есть бегунок, дающий понять, что задача в данный момент активна.
Каждый раз, когда вы делаете изменения в *.scss, или *.ts файлах и сохраняете результат, будет вызываться соответствующая задача для выполнения. После этого вам нужно будет обновить страницу в браузере, чтобы увидеть как изменилась ваша страница.
Чтобы остановить задачу нажмите клавиши Ctrl+Shift+P
и выберите Terminate running task (Завершить запущенную задачу). К счастью, IntelliSense запускается практически в самом начале, поэтому вручную много печатать вам не придется.
Также, вы можете установить пакет npm-livereload вместе с соответствующим плагином для браузера, который позволит вам автоматически обновлять тестируемую страницу каждый раз, когда есть изменения в отслеживаемых файлах.