Командная строка в Веб дизайне: Live Reload и BrowserSync
Russian (Pусский) translation by Nail (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 в ваш проект командой:
npm install grunt-express --save-dev
Затем включите этот плагин в вашем Gruntfile добавив после существующих строк grunt.loadNpmTasks
строки:
grunt.loadNpmTasks('grunt-express');
Настройте express плагин добавив следующий код:
express: { all: { options: { bases: 'build', livereload: true, open: 'http://localhost:3000' } } },
Вы заметите что в настройке плагина express
у нас есть livereload
параметр установленный в true
, так что после запуска локального просмотра будет автоматически перезагружаться после любых обнаруженных изменений.
Сейчас мы добавим новую задачу start
. Мы будем использовать эту задачу для запуска двух задач express
и watch
сразу.
Добавьте после существующих строк grunt.registerTask
строку:
grunt.registerTask('start', ['express', 'watch']);
Теперь запустите команду:
grunt start
...и вы увидите как откроется браузер по умолчанию с вашим проектом.
Запущенная задача watch
будет компилировать ваши Stylus и Jade файлы после каждого сохранения в папку "build".
Express отслеживает изменения сделанные в папке "build" для ваших HTML, CSS или JS которые были перекомилированы и будет автоматически перегружать браузер.
Автоматическая перезагрузка с помощью Gulp
Двинемся дальше и сделаем такое же автоматическое обновление на локальном хосте в Gulp проекте. На этот раз мы собираемся использовать gulp-connect вместо предыдущего.
Установите gulp-connect в ваш проект командой:
npm install --save-dev gulp-connect
Сделайте это доступным в вашем Gulpfile добавив после остальных строк где используется require()
функцию:
var connect = require('gulp-connect');
Установите новую задачу connect
добавив под остальными задачами следующий код:
gulp.task('connect', function() { connect.server({ root: 'build', livereload: true, open: true }); });
Также как мы сделали с Grunt, мы теперь собираемся создать такую же задачу называемую start
которая будет отслеживать изменения в файлах и перезагружать страницу в локальном хосте.
Добавьте следующую строчку кода внизу вашего Gulpfile:
gulp.task('start', ['connect', 'watch']);
Чтобы включить автоматическую перезагрузку, мы собираемся добавить другие "pipe" в конце двух задач css
и html
Добавьте этот обработчик в конце каждого:
.pipe(connect.reload())
После добавления код задач становится таким для css:
gulp.task('css', function () { gulp.src('source/stylus/main.styl') .pipe(stylus({compress: false, paths: ['source/stylus']})) .pipe(autoprefixer()) .pipe(minifyCSS()) .pipe(rename('style.css')) .pipe(gulp.dest('build')) .pipe(connect.reload()) });
....и таким для html:
gulp.task('html', function() { gulp.src('source/jade/*.jade') .pipe(jade()) .pipe(gulp.dest('build')) .pipe(connect.reload()) });
Теперь осталось запустить команду:
gulp start
...по сравнению с Grunt здесь нужно перейти вручную по адресу http://localhost:8080 и вы увидите ваш локальный сайт.
Сделайте какие-нибудь изменения в вашем Jade или Stylus файле сохраните, и тогда проект будет скомпилирован снова и в браузере произойдет автоматическая перезагрузка.
Браузерная синхронизация
Теперь когда вы имеете свой локальный сайт с автоматически перегружаемым предпросмотром, вы могли бы закончить чтение этого урока и инструменты с которыми вы научились работать было бы для вас вполне достаточно для превосходной разработки ваших проектов. Однако, когда дело доходит до тестирования в разных браузерах и устройствах, также имеется BrowserSync который заслуживает вашего внимания.
С BrowserSync вы можете протестировать ваш проект в любом браузере на любом устройстве, в одном подключении в разных окнах.
Все это запущенное в предварительном просмотре будет перегружено после изменения файлов и их сохранения так что вы можете увидеть изменения отображения во всех устройствах. Если вы перемотаете страницу или откроете меню в одном из браузеров вы увидите как в других браузерах и устройствах будет выглядеть это действие одновременно.
Использование BrowserSync в Grunt
Чтобы установить grunt-browser-sync плагин в ваш Grunt проект запустите команду:
npm install grunt-browser-sync --save-dev
Закоментируйте или удалите строку кода grunt-express из файла Gruntfile:
// grunt.loadNpmTasks('grunt-express');
Потом добавьте строку кода grunt-browser-sync заместо того кода:
grunt.loadNpmTasks('grunt-browser-sync');
Закомментируйте или удалите задачу express
которую вы добавили ранее, и добавьте другой код для задачи browserSync
:
browserSync: { bsFiles: { src : ['build/*.css', 'build/*.html'] }, options: { watchTask: true, server: { baseDir: "build" } } },
В задаче start
и поменяйте express
на browserSync
:
grunt.registerTask('start', ['express', 'watch']);
....должно стать так:
grunt.registerTask('start', ['browserSync', 'watch']);
Сейчас когда вы запустите команду:
grunt start
...вы увидите локальный сайт открывшийся для предварительного просмотра, и он по прежнему будет отслеживать изменения, и автоматически перезагружаться, но отличие в том что сейчас активизировалась браузерная синхронизация, и у вас есть возможность делать предварительный просмотр вашего локального сайта в других браузерах и устройствах.
В командной строке после запуска вашего BrowserSync сервера вы увидите следующее:
———————————— Local: http://localhost:3000 External: http://192.168.1.3:3000 ———————————— UI: http://localhost:3001 UI External: http://192.168.1.3:3001 ————————————
Вставьте адрес помеченный как Local, в адресную строку других браузеров, и вставьте адрес помеченный как External в любые другие устройства у которых есть доступ по локальной сети. Затем вы увидите синхронизированные ответы во всех открытых браузерах на разных устройствах во время взаимодействия с одним из них.
Для более подробной информации о BrowserSync в Grunt перейдите по ссылке:
Использование BrowserSync в Gulp
Сейчас мы выполним похожее действие, на этот раз используя плагин browser-sync для Gulp.
Установите этот плагин в ваш Gulp проект командой:
npm install browser-sync gulp --save-dev
В Gulpfile закоментируйте или удалите следующую строку:
// var connect = require('gulp-connect');
...и замените это на:
var browserSync = require('browser-sync');
Закоментируйте или удалите существующий код для задачи connect
и добавьте вместо него код для задачи browser-sync
:
gulp.task('browser-sync', function() { browserSync({ server: { baseDir: "build" } }); });
В конце css и html задач перейдите к строке:
.pipe(connect.reload())
...и замените каждую из этих двух строк кода на:
.pipe(browserSync.reload({stream:true}))
И под конец перейдите к существующему коду задачи start
и замените запускаемую задачу connect
на browser-sync
:
gulp.task('start', ['connect', 'watch']);
...чтобы стало так:
gulp.task('start', ['browser-sync', 'watch']);
Теперь когда вы запустите команду:
gulp start
...откроется браузер с вашим локальным сайтом. Точно также как и при использовании BrowserSync в Grunt, адреса предварительного просмотра будут синхронизироваться при взаимодействии в любом браузере и на любом устройстве запущенном по локальной сети.
Для более подробной информации о BrowserSync в Gulp посетите страницу:
В следующем уроке
Вы прошли через все необходимое для создания собственных проектов с нуля, чтобы использовать командную строку в процессе разработки. Но как насчет того когда вы не хотите начинать проект с нуля. Как насчет того когда вы хотите использовать существующий сторонний фреймворк, или вы просто хотите закончить начатый проект?
В следующем уроке вы научитесь использовать командную строку для подготовки нового проекта очень быстро, с кодами сторонних разработчиков, и настройками готовыми к работе.
Я жду вас в следующем уроке!
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Update me weekly