Командная строка в Веб дизайне: 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 посетите страницу:

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

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

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

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