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 посетите страницу:
В следующем уроке
Вы прошли через все необходимое для создания собственных проектов с нуля, чтобы использовать командную строку в процессе разработки. Но как насчет того когда вы не хотите начинать проект с нуля. Как насчет того когда вы хотите использовать существующий сторонний фреймворк, или вы просто хотите закончить начатый проект?
В следующем уроке вы научитесь использовать командную строку для подготовки нового проекта очень быстро, с кодами сторонних разработчиков, и настройками готовыми к работе.
Я жду вас в следующем уроке!
