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/
11-12-2014 gulp.js BrowserSync Виктор Матушевский