BrowserSync и Gulp.js

Давайте рассмотрим инструмент для 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]);
});

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

Если работа через потоки, вам не подходит, то вы можете запускать перезагрузку вручную, обернув её в задачу. Этот пример будет компилировать и автоматически вставлять 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/