Бегущий по заданию Gulp.js в последнее время становится все более популярным. Его можно использовать для многих целей, таких как объединение файлов JavaScript или минимизация изображений. Если вы новичок в Gulp.js, я рекомендую начать с управления задачами сборки с помощью Gulp.js.
В этом руководстве вы узнаете, как использовать Gulp.js для запуска локального веб-сервера со встроенной поддержкой livereload .
По старому
Давайте предположим, что мы хотим разработать одностраничное приложение. Точкой входа для этого приложения является простой файл index.html . Наша цель — получить доступ к этому файлу через браузер, перейдя на localhost . В прошлом, возможно, вы настраивали сервер Apache или Nginx . Ну, это больше не нужно.
Лучший путь
Сегодня реализация в JavaScript существует практически для всего, даже для веб-сервера. Самый популярный называется Connect . Мы будем использовать его, используя плагин Gulp.js под названием gulp -connect .
В следующих разделах мы настроим локальный веб-сервер для одностраничного приложения, поэтому я предполагаю, что вы уже настроили базовые файлы, такие как файл gulpfile.js .
Начальная настройка
Мы начнем с установки плагина Connect с помощью команды ниже. Все, что нам нужно, будет установлено с помощью этой единственной команды.
|
1
|
npm install —save-dev gulp-connect
|
Совет : npm install --save-dev может быть сокращена до npm i -D .
Теперь давайте определим задачу для веб-сервера. Наш gulpfile.js должен выглядеть так:
|
1
2
3
4
5
6
7
8
|
var gulp = require(‘gulp’),
connect = require(‘gulp-connect’);
gulp.task(‘webserver’, function() {
connect.server();
});
gulp.task(‘default’, [‘webserver’]);
|
Теперь мы можем запустить веб-сервер, просто запустив gulp в терминале. Мы можем открыть localhost:8080 в нашем браузере, где мы должны увидеть index.html . Веб-сервер монтирует файловую структуру папки, в которой находится gulpfile.js , в корневой каталог localhost:8080 . Сервер будет работать, пока вы не остановите задачу, нажав Ctrl + c на клавиатуре. Большой!
Вы можете найти исходный код этого и всех последующих примеров на Github . Каждый пример содержит все необходимые файлы для воспроизведения рабочей настройки. Вам просто нужно запустить npm install в соответствующем каталоге.
Добавление поддержки livereload
Настроить базовый веб-сервер было легко, правда? Итак, давайте продолжим livereload . Нам нужно сделать две вещи: во-первых, сказать веб-серверу, что нужно начинать с поддержки livereload и, во-вторых, мы livereload когда обновлять страницу новым контентом.
Первый шаг прост. Просто установите для свойства livereload значение true . Задача webserver выглядит следующим образом:
|
1
2
3
4
5
|
gulp.task(‘webserver’, function() {
connect.server({
livereload: true
});
});
|
Второй шаг зависит от вашего варианта использования. В этом примере мы настроим автоматическую компиляцию файлов LESS в таблицу стилей CSS и вставим ее в браузер. Давайте разберем этот пример на части. Нам нужен «наблюдатель», который проверяет, изменились ли некоторые файлы LESS. Этот наблюдатель должен затем запустить компилятор LESS, который выводит файл CSS. Этот CSS-файл затем должен быть введен через livereload .
Для этого примера мы будем использовать плагин без gulp. Вы можете установить его, запустив npm install --save-dev gulp-less . Наблюдатель уже поставляется с Gulp.js. Структура файла нашего приложения должна выглядеть примерно так:
|
1
2
3
4
5
6
7
8
|
.
├── node_modules
│ └── …
├── styles
│ └── main.less
├── gulpfile.js
├── index.html
└── package.json
|
В задаче watch Gulp.js прослушивает изменения всех файлов *.less в папке styles и запускает задачу less . Здесь файл main.less является точкой входа для LESS. После каждого шага компиляции результат будет автоматически вставлен в браузер. Код для gulpfile.js выглядит следующим образом, вы можете свободно копировать и вставлять его в свой проект.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
|
var gulp = require(‘gulp’),
connect = require(‘gulp-connect’),
less = require(‘gulp-less’);
gulp.task(‘webserver’, function() {
connect.server({
livereload: true
});
});
gulp.task(‘less’, function() {
gulp.src(‘styles/main.less’)
.pipe(less())
.pipe(gulp.dest(‘styles’))
.pipe(connect.reload());
});
gulp.task(‘watch’, function() {
gulp.watch(‘styles/*.less’, [‘less’]);
})
gulp.task(‘default’, [‘less’, ‘webserver’, ‘watch’]);
|
Давайте снова запустим gulp в терминале и снова откроем localhost:8080 в браузере. Теперь мы можем внести некоторые изменения в файл LESS в папке styles . Он будет мгновенно скомпилирован и обновлен в браузере. Обратите внимание, что вам не нужно никаких расширений браузера . livereload работает из коробки.
Несколько настроек
Помните, что предыдущий gulpfile.js является лишь минимальной демонстрацией того, как использовать Gulp.js в качестве веб-сервера с livereload . Я настоятельно рекомендую поиграть с некоторыми другими плагинами. Вам также следует попытаться изменить структуру задачи и использовать не встроенный плагин gulp-watch , который позволяет обрабатывать только измененные файлы. Это становится важным, если вы работаете с большей кодовой базой. Позже в этом уроке мы увидим, как может выглядеть альтернативная структура задач.
Изменение имени хоста и порта
Сам плагин gulp-connect имеет множество опций конфигурации. Например, вы можете изменить порт веб-сервера или имя хоста. Вы даже можете использовать произвольное имя хоста с портом 80 (по умолчанию localhost:8080 ).
|
1
2
3
4
|
connect.server({
port: 80,
host: ‘gulp.dev’
});
|
Чтобы это работало, нам нужно иметь gulp.dev в нашем файле hosts и запустить команду sudo gulp . Права администратора необходимы для использования порта 80 .
Некоторые дополнительные функции
Вы можете пойти еще дальше, используя подключаемый модуль для одновременного запуска нескольких веб-серверов. Это становится полезным, например, если вы хотите запустить веб-сервер разработки и запустить интеграционные тесты одновременно .
gulp-connect также предоставляет возможность использовать несколько каталогов в качестве корневой папки. Например, если вы используете CoffeeScript и хотите сохранить скомпилированные файлы JavaScript во временной папке, вы можете подключить эту папку, не загрязняя исходную папку.
Дополнительные примеры можно найти в репозитории GitHub .
Рефакторинг нашего кода
В предыдущем примере мы установили минимальный gulpfile.js чтобы скомпилировать файлы LESS в CSS и сразу ввести их в браузер. Это сработало, но мы можем сделать лучше. Может быть проблематично, что мы смешали шаги компиляции и livereload в одну задачу. Итак, давайте разделим их и посмотрим на изменения в сгенерированных файлах. Для этого мы будем использовать ранее упомянутый плагин gulp-watch .
Давайте пойдем еще дальше и добавим шаг компиляции CoffeeScript. С этим дополнительным шагом новая структура должна стать более понятной. Мы устанавливаем новые плагины в одном пакете через:
|
1
|
npm install —save-dev gulp-watch gulp-coffee
|
И require их в верхней части нашего gulpfile.js . В следующей настройке я предполагаю, что у вас уже есть некоторые файлы .coffee в каталоге, называемом scripts . Для примера установки, пожалуйста, ознакомьтесь с этим репо . gulpfile.js может выглядеть следующим образом. Мы пройдем через изменения, шаг за шагом.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
var gulp = require(‘gulp’),
connect = require(‘gulp-connect’),
watch = require(‘gulp-watch’),
less = require(‘gulp-less’),
coffee = require(‘gulp-coffee’);
gulp.task(‘webserver’, function() {
connect.server({
livereload: true,
root: [‘.’, ‘.tmp’]
});
});
gulp.task(‘livereload’, function() {
gulp.src([‘.tmp/styles/*.css’, ‘.tmp/scripts/*.js’])
.pipe(watch())
.pipe(connect.reload());
});
gulp.task(‘less’, function() {
gulp.src(‘styles/main.less’)
.pipe(less())
.pipe(gulp.dest(‘.tmp/styles’));
});
gulp.task(‘coffee’, function() {
gulp.src(‘scripts/*.coffee’)
.pipe(coffee())
.pipe(gulp.dest(‘.tmp/scripts’));
});
gulp.task(‘watch’, function() {
gulp.watch(‘styles/*.less’, [‘less’]);
gulp.watch(‘scripts/*.coffee’, [‘coffee’]);
})
gulp.task(‘default’, [‘less’, ‘coffee’, ‘webserver’, ‘livereload’, ‘watch’]);
|
Самое большое изменение, которое мы видим, — это дополнительная задача livereload . Эта задача просто отслеживает (через плагин gulp-watch ) изменения в скомпилированных файлах и обновляет их в браузере. Пользовательская функция watch() позволяет нам просто перезагрузить измененные файлы, тогда как встроенная gulp.watch() перезагрузит все файлы, а не только измененные.
Из-за этой единственной дополнительной задачи нам не нужна .pipe(connect.reload()) после каждого шага компиляции. Поэтому мы разделили задачи по их интересам, что всегда является хорошей идеей при разработке программного обеспечения.
Мы также заметили, что скомпилированные файлы больше не сохраняются в соответствующей исходной папке. Теперь они хранятся во временной папке с именем .tmp . Содержимое этой папки является просто сгенерированными файлами и больше не будет загрязнять каталоги styles или scripts . Также рекомендуется исключить эту папку из вашей системы контроля версий. Все, что нам нужно сделать, чтобы это работало, это также смонтировать .tmp в качестве корневой папки, что делается
|
1
|
root: [‘.’, ‘.tmp’]
|
Эта измененная настройка должна работать так же, как и раньше. Но это намного чище и его легче расширять.
Вывод
Вы только что узнали, как использовать Gulp.js в качестве веб-сервера.
Вы можете комбинировать эту технику со многими другими вариантами использования, такими как тестирование или создание одностраничного приложения. Обратите внимание, что этот веб-сервер предназначен только для локальной разработки. В производственных целях вы должны использовать более производительное решение, такое как Nginx или CDN.
Обратите внимание, что все представленные функции также возможны с Grunt или аналогичными проектами. Gulp.js просто предоставляет очень простой и элегантный способ ведения дел.