Давайте рассмотрим инструмент для Front-end разработчиков - BrowserSync. Будем использовать его вместе с Gulp.js.

Для чего нужен BrowserSync:

  • активной синхронизации - вы прокручиваете, кликаете, обновляете и заполняете формы в различных тестируемых браузерах одновременно;
  • синхронизация кода - браузеры автоматически обновляются с каждым изменением вашего HTML, CSS, изображений и других файлов проекта;
  • легкой интеграции с исполнителями задач, можете использовать существующие Grunt плагины или написать свой;
  • поддержки браузеров - немедленная синхронизация между десктоп, таблет ПК или телефоном, отлично подходит для отзывчивого дизайна;
  • независимый бек-энд - можно использовать с веб-сайтами, которые работают на PHP, ASP, Rails и остальном, а также для просто статических сайтов.
  • запускается везде - построен на Node.js и работает в Windows, MacOS и Linux. Установка меньше, чем за 5 минут.

BrowserSync + Gulp.js

Нет никакого официального плагина BrowserSync для Gulp, просто потому что он не нужен! Вы просто требуете require модуль и всё, можно использовать API и конфигурировать его с помощью опций. Дальше представлены несколько общих случаев использования, подсмотренных в таких популярных проектах, как Google’s web starter kit и многих других.

Установка

Во-первых, вам нужно установить BrowserSync & Gulp как завимости разработки.

$ npm install browser-sync gulp --save-dev

Далее, использовать их в вашем gulpfile.js:

`var gulp = require(‘gulp’); var browserSync = require(‘browser-sync’);

// Статический сервер gulp.task(‘browser-sync’, function() { browserSync({ server: { baseDir: “./” } }); });

// или…

gulp.task(‘browser-sync’, function() { browserSync({ proxy: “yourlocal.dev” }); });`

SASS + CSS инъекция

Потоки поддерживаются в BrowserSync, поэтому вы можете вызвать перезагрузку в специфических местах во время ваших задач и все браузеры будут проинформированы об изменениях. Так как BrowserSync только заботится про ваш CSS, когда он заканчивает компиляцию - убедитесь, что вы вызвали перезагрузку после gulp.dest

`var gulp = require(‘gulp’); var browserSync = require(‘browser-sync’); var reload = browserSync.reload; var sass = require(‘gulp-sass’);

// browser-sync задача для запуска сервера gulp.task(‘browser-sync’, function() { browserSync({ server: { baseDir: “./” } }); });

// Sass задача запустится после изменения любого SCSS файла и BrowserSync // обновит браузеры gulp.task(‘sass’, function () { return gulp.src(‘scss/**/*.scss’) .pipe(sass()) .pipe(gulp.dest(‘css’)) .pipe(reload({stream:true})); });

// Задача по-умолчанию при запуске gulp gulp.task(‘default’, [‘sass’, ‘browser-sync’], function () { gulp.watch(“scss/*.scss”, [‘sass’]); });`

SASS & Карта источников

Если вы используете gulp-ruby-sass вместе с sourcemap: true опцией, то будут дополнительно сгенерированны .map файлы. Эти файлы будут посланы в поток и когда browserSync.reload() получит их, то он попробует перезагрузить полностью страницу (так как он не найдёт никаких .map файлов в DOM).

Для исправления этой проблемы, вы можете использовать пакет gulp-filter для уверенности в том, что только *.css файлы достигнут .reload - таким способом вы получите CSS инъекцию.

`var gulp = require(“gulp”); var sass = require(“gulp-ruby-sass”); var filter = require(‘gulp-filter’); var browserSync = require(“browser-sync”);

gulp.task(‘sass’, function () { return gulp.src(‘scss//*.scss’) .pipe(sass({sourcemap: true})) .pipe(gulp.dest(‘css’))// Write the CSS & Source maps .pipe(filter(’/*.css’)) // Filtering stream to only css files .pipe(browserSync.reload({stream:true})); });`

Перезагрузка браузера

Иногда вам нужно будет перезагрузить страницу полностью (например, после обработки кучи JS файлов), вы можете легко это сделать, добавив .reload к массиву задач, которые будут запущены при изменении файлов (убедитесь, что вы вернули return поток от ваших задач, чтобы браузер перезагрузился в правильный момент)

`// запуск сервера gulp.task(‘browser-sync’, function() { browserSync({ server: { baseDir: “./” } }); });

// обработка JS файлов и возврат потока. gulp.task(‘js’, function () { return gulp.src(‘js/*js’) .pipe(browserify()) .pipe(uglify()) .pipe(gulp.dest(‘dist/js’)); });

// использование задачи по-умолчанию для запуска BrowserSync и наблюдения за JS файлами gulp.task(‘default’, [‘browser-sync’], function () {

// добавление browserSync.reload для массива задач, чтобы 
// все браузеры перезагружались после выполнения всех задач
gulp.watch("js/*.js", ['js', browserSync.reload]);

});` [[$googleAdsence]]

Ручная перезагрузка

Если работа через потоки, вам не подходит, то вы можете запускать перезагрузку вручную, обернув её в задачу. Этот пример будет компилировать и автоматически вставлять CSS, так же как и ранее, но когда меняются HTML файлы, то браузеры будут перезапускаться.

`// Запуск сервера gulp.task(‘browser-sync’, function() { browserSync({ server: { baseDir: “./” } }); });

// Компиляция SASS и автоинъекция в браузеры gulp.task(‘sass’, function () { return gulp.src(‘scss/styles.scss’) .pipe(sass({includePaths: [‘scss’]})) .pipe(gulp.dest(‘css’)) .pipe(browserSync.reload({stream:true})); });

// Перезапуск всех серверов gulp.task(‘bs-reload’, function () { browserSync.reload(); });

// Наблюдение за scss и html файлами, делаем разные вещи gulp.task(‘default’, [‘browser-sync’], function () { gulp.watch(“scss/.scss”, [‘sass’]); gulp.watch(".html", [‘bs-reload’]); });`

Источник - официальная документация по BrowserSync http://www.browsersync.io/docs/gulp/