Advertisement
  1. Web Design
  2. Terminal

Командная строка в Веб дизайне: Live Reload и BrowserSync

Scroll to top
Read Time: 6 min
This post is part of a series called The Command Line for Web Design.
The Command Line for Web Design: Automation With Gulp
The Command Line for Web Design: Scaffolding New Projects

() 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 посетите страницу:

В следующем уроке

Вы прошли через все необходимое для создания собственных проектов с нуля, чтобы использовать командную строку в процессе разработки. Но как насчет того когда вы не хотите начинать проект с нуля. Как насчет того когда вы хотите использовать существующий сторонний фреймворк, или вы просто хотите закончить начатый проект?

В следующем уроке вы научитесь использовать командную строку для подготовки нового проекта очень быстро, с кодами сторонних разработчиков, и настройками готовыми к работе.

Я жду вас в следующем уроке!

Advertisement
Did you find this post useful?
Want a weekly email summary?
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.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.