Командная строка в Веб дизайне: Live Reload и BrowserSync
() translation by (you can also view the original English article)
В предыдущем уроке вы научились компилировать и собирать весь проект с короткими командами такими как grunt
, grunt watch
, gulp
и gulp watch
.
В этом уроке вы научитесь создавать команды которые добавляют дополнительные замечательные возможности в ваши проекты, такие как включение автоматической перезагрузки и синхронизации браузера.
Если вы еще не прошли предыдущие уроки в этой серии, пожалуйста вернитесь и выполните их прежде чем начнете выполнять этот урок.
Автоматическая перезагрузка
Замечание: Чтобы избежать путаницы, существует приложение для рабочего стола и сочетание расширения для браузера Chrome называемое LiveReload которое часто используется вместе с множеством npm пакетов чтобы управлять автоматической перезагрузкой. Мы не будем рассматривать их, выберите любой из двух подходов сами.
Автоматическая перезагрузка с помощью Grunt
Чтобы обеспечить работу автоматической перезагрузки должен быть локальный хост который будет перезагружен, то есть способ показа вашего сайта локально по протоколу http://
вместо file://
.
Для того чтобы в вашем Grunt проекте статические файлы были доступны по локальному хосту, и работала автоматическая перезагрузка, используется плагин grunt-express.
Установка grunt-express в ваш проект командой:
1 |
npm install grunt-express --save-dev |
Затем включите этот плагин в вашем Gruntfile добавив после существующих строк grunt.loadNpmTasks
строки:
1 |
grunt.loadNpmTasks('grunt-express'); |
Настройте express плагин добавив следующий код:
1 |
express: { |
2 |
all: { |
3 |
options: { |
4 |
bases: 'build', |
5 |
livereload: true, |
6 |
open: 'http://localhost:3000' |
7 |
}
|
8 |
}
|
9 |
},
|
Вы заметите что в настройке плагина express
у нас есть livereload
параметр установленный в true
, так что после запуска локального просмотра будет автоматически перезагружаться после любых обнаруженных изменений.
Сейчас мы добавим новую задачу start
. Мы будем использовать эту задачу для запуска двух задач express
и watch
сразу.
Добавьте после существующих строк grunt.registerTask
строку:
1 |
grunt.registerTask('start', ['express', 'watch']); |
Теперь запустите команду:
1 |
grunt start |
...и вы увидите как откроется браузер по умолчанию с вашим проектом.
Запущенная задача watch
будет компилировать ваши Stylus и Jade файлы после каждого сохранения в папку "build".
Express отслеживает изменения сделанные в папке "build" для ваших HTML, CSS или JS которые были перекомилированы и будет автоматически перегружать браузер.
Автоматическая перезагрузка с помощью Gulp
Двинемся дальше и сделаем такое же автоматическое обновление на локальном хосте в Gulp проекте. На этот раз мы собираемся использовать gulp-connect вместо предыдущего.
Установите gulp-connect в ваш проект командой:
1 |
npm install --save-dev gulp-connect |
Сделайте это доступным в вашем Gulpfile добавив после остальных строк где используется require()
функцию:
1 |
var connect = require('gulp-connect'); |
Установите новую задачу connect
добавив под остальными задачами следующий код:
1 |
gulp.task('connect', function() { |
2 |
connect.server({ |
3 |
root: 'build', |
4 |
livereload: true, |
5 |
open: true |
6 |
});
|
7 |
});
|
Также как мы сделали с Grunt, мы теперь собираемся создать такую же задачу называемую start
которая будет отслеживать изменения в файлах и перезагружать страницу в локальном хосте.
Добавьте следующую строчку кода внизу вашего Gulpfile:
1 |
gulp.task('start', ['connect', 'watch']); |
Чтобы включить автоматическую перезагрузку, мы собираемся добавить другие "pipe" в конце двух задач css
и html
Добавьте этот обработчик в конце каждого:
1 |
.pipe(connect.reload()) |
После добавления код задач становится таким для css:
1 |
gulp.task('css', function () { |
2 |
gulp.src('source/stylus/main.styl') |
3 |
.pipe(stylus({compress: false, paths: ['source/stylus']})) |
4 |
.pipe(autoprefixer()) |
5 |
.pipe(minifyCSS()) |
6 |
.pipe(rename('style.css')) |
7 |
.pipe(gulp.dest('build')) |
8 |
.pipe(connect.reload()) |
9 |
});
|
....и таким для html:
1 |
gulp.task('html', function() { |
2 |
gulp.src('source/jade/*.jade') |
3 |
.pipe(jade()) |
4 |
.pipe(gulp.dest('build')) |
5 |
.pipe(connect.reload()) |
6 |
});
|
Теперь осталось запустить команду:
1 |
gulp start |
...по сравнению с Grunt здесь нужно перейти вручную по адресу http://localhost:8080 и вы увидите ваш локальный сайт.
Сделайте какие-нибудь изменения в вашем Jade или Stylus файле сохраните, и тогда проект будет скомпилирован снова и в браузере произойдет автоматическая перезагрузка.
Браузерная синхронизация
Теперь когда вы имеете свой локальный сайт с автоматически перегружаемым предпросмотром, вы могли бы закончить чтение этого урока и инструменты с которыми вы научились работать было бы для вас вполне достаточно для превосходной разработки ваших проектов. Однако, когда дело доходит до тестирования в разных браузерах и устройствах, также имеется BrowserSync который заслуживает вашего внимания.
С BrowserSync вы можете протестировать ваш проект в любом браузере на любом устройстве, в одном подключении в разных окнах.
Все это запущенное в предварительном просмотре будет перегружено после изменения файлов и их сохранения так что вы можете увидеть изменения отображения во всех устройствах. Если вы перемотаете страницу или откроете меню в одном из браузеров вы увидите как в других браузерах и устройствах будет выглядеть это действие одновременно.
Использование BrowserSync в Grunt
Чтобы установить grunt-browser-sync плагин в ваш Grunt проект запустите команду:
1 |
npm install grunt-browser-sync --save-dev |
Закоментируйте или удалите строку кода grunt-express из файла Gruntfile:
1 |
// grunt.loadNpmTasks('grunt-express');
|
Потом добавьте строку кода grunt-browser-sync заместо того кода:
1 |
grunt.loadNpmTasks('grunt-browser-sync'); |
Закомментируйте или удалите задачу express
которую вы добавили ранее, и добавьте другой код для задачи browserSync
:
1 |
browserSync: { |
2 |
bsFiles: { |
3 |
src : ['build/*.css', 'build/*.html'] |
4 |
},
|
5 |
options: { |
6 |
watchTask: true, |
7 |
server: { |
8 |
baseDir: "build" |
9 |
}
|
10 |
}
|
11 |
},
|
В задаче start
и поменяйте express
на browserSync
:
1 |
grunt.registerTask('start', ['express', 'watch']); |
....должно стать так:
1 |
grunt.registerTask('start', ['browserSync', 'watch']); |
Сейчас когда вы запустите команду:
1 |
grunt start |
...вы увидите локальный сайт открывшийся для предварительного просмотра, и он по прежнему будет отслеживать изменения, и автоматически перезагружаться, но отличие в том что сейчас активизировалась браузерная синхронизация, и у вас есть возможность делать предварительный просмотр вашего локального сайта в других браузерах и устройствах.
В командной строке после запуска вашего BrowserSync сервера вы увидите следующее:
1 |
———————————— |
2 |
Local: http://localhost:3000 |
3 |
External: http://192.168.1.3:3000 |
4 |
———————————— |
5 |
UI: http://localhost:3001 |
6 |
UI External: http://192.168.1.3:3001 |
7 |
———————————— |
Вставьте адрес помеченный как Local, в адресную строку других браузеров, и вставьте адрес помеченный как External в любые другие устройства у которых есть доступ по локальной сети. Затем вы увидите синхронизированные ответы во всех открытых браузерах на разных устройствах во время взаимодействия с одним из них.
Для более подробной информации о BrowserSync в Grunt перейдите по ссылке:
Использование BrowserSync в Gulp
Сейчас мы выполним похожее действие, на этот раз используя плагин browser-sync для Gulp.
Установите этот плагин в ваш Gulp проект командой:
1 |
npm install browser-sync gulp --save-dev |
В Gulpfile закоментируйте или удалите следующую строку:
1 |
// var connect = require('gulp-connect');
|
...и замените это на:
1 |
var browserSync = require('browser-sync'); |
Закоментируйте или удалите существующий код для задачи connect
и добавьте вместо него код для задачи browser-sync
:
1 |
gulp.task('browser-sync', function() { |
2 |
browserSync({ |
3 |
server: { |
4 |
baseDir: "build" |
5 |
}
|
6 |
});
|
7 |
});
|
В конце css и html задач перейдите к строке:
1 |
.pipe(connect.reload()) |
...и замените каждую из этих двух строк кода на:
1 |
.pipe(browserSync.reload({stream:true})) |
И под конец перейдите к существующему коду задачи start
и замените запускаемую задачу connect
на browser-sync
:
1 |
gulp.task('start', ['connect', 'watch']); |
...чтобы стало так:
1 |
gulp.task('start', ['browser-sync', 'watch']); |
Теперь когда вы запустите команду:
1 |
gulp start |
...откроется браузер с вашим локальным сайтом. Точно также как и при использовании BrowserSync в Grunt, адреса предварительного просмотра будут синхронизироваться при взаимодействии в любом браузере и на любом устройстве запущенном по локальной сети.
Для более подробной информации о BrowserSync в Gulp посетите страницу:
В следующем уроке
Вы прошли через все необходимое для создания собственных проектов с нуля, чтобы использовать командную строку в процессе разработки. Но как насчет того когда вы не хотите начинать проект с нуля. Как насчет того когда вы хотите использовать существующий сторонний фреймворк, или вы просто хотите закончить начатый проект?
В следующем уроке вы научитесь использовать командную строку для подготовки нового проекта очень быстро, с кодами сторонних разработчиков, и настройками готовыми к работе.
Я жду вас в следующем уроке!