How to use browsersync for faster development

2.1.0 (2015-02-16)

  • https: Add HTTPS proxying — re: #399 (09dbca6e)
  • proxy: Allow user-specified proxy request headers (0c303a7e, closes #430)

2.0.1 (2015-02-10)

  • cli:
    • Ensure server options are merged from command line (8d677328)
    • explode files args when given on command line., (18324f0a, closes #425, #426)
    • Don’t double-merge cli options, re: #417 (057d97f3)
  • https: Ensure HTTPS option is used in legacy mode + top level, re: #427 (799c0a59)
  • proxy:
    • use path as startPath if given as proxy option (f4ac4c59)
    • Bump Foxy module to fix issues with redirects, (e5d8fe18, closes #381)
  • reload: Bump browser-sync-client fix ##369 (9bcf1086)
  • stream: Don’t log file info when once: true — fixes https://github.com/google/web-starter-kit/issues/593 (8f4d7275)
  • core: Use immutable data internally to enable advanced features needed in upcoming UI (b5d6d9c1)
  • options:
    • Allow silent setting of options (31e196a0)
    • added reloadOnRestart option — https://github.com/shakyShane/browser-sync/issues (b1bcfa81)
  • server: add serveFile method for plugin use (c5007871)
  • snippet: Add black/white lists — (6a2a296e, closes #373)
  • tunnel: Switch to ngrok — re: #192 (7359435c)

1.8.2 (2014-12-22)

proxy: Bump foxy to fix #376 (fe6c73db)

server: allow to inject browser-sync client.js in custom middlewares (841c6c31)

proxy: Bump foxy to fix #376 (284cf84a)

files: pause/resume (a3c697f6)

1.6.5 (2014-11-16)

snippet: Add snippet.ignorePaths option — (dd9b284b, closes #330)

snippet: Allow user-provided rule for writing the snippet (33c4586d)

proxy: Bump Foxy to fix issues with redirects (e2f30be2)

HTML верстка и анализ содержания сайта

Размещённая в данном блоке информация используется оптимизаторами для контроля наполнения контентом главной страницы сайта, количества ссылок, фреймов, графических элементов, объёма теста, определения «тошноты» страницы.
Отчёт содержит анализ использования Flash-элементов, позволяет контролировать использование на сайте разметки (микроформатов и Doctype).

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

Flash — это мультимедийная платформа компании для создания веб-приложений или мультимедийных презентаций. Широко используется для создания рекламных баннеров, анимации, игр, а также воспроизведения на веб-страницах видео- и аудиозаписей.

Микроформат — это способ семантической разметки сведений о разнообразных сущностях (событиях, организациях, людях, товарах и так далее) на веб-страницах с использованием стандартных элементов языка HTML (или XHTML).

Анализ поисковых запросов сайта

Приведённый выше отчёт по частотности использования поисковых запросов, может быть использован оптимизаторами сайта при составлении его семантического ядра и подготовке контента т.н. «посадочных страниц». Статистика поисковых запросов — обобщённая сгруппированная информация по «обращениям» пользователей к поисковой системе по ключевым запросам (фразам).
В большинстве случаев, наш сервис показывает уже сгруппированную информацию, содержащую не только подборку самых популярных слов (фраз), но и словосочетания + синонимы. Собранная в данном разделе статистика показывает по каким «ключевым словам» (поисковым запросам) пользователи переходят на сайт browsersync.io.

Поисковый запрос – это слово или словосочетание, которое пользователь вводит в форму поиска на сайте поисковой системы, с учётом автоподбора и автоматического исправления в поиске ошибочного набора.

Core concept

Proxy middleware configuration.

createProxyMiddleware( config)

const { createProxyMiddleware } = require('http-proxy-middleware');

const apiProxy = createProxyMiddleware('/api', { target: 'http://www.example.org' });
//                                    \____/   \_____________________________/
//                                      |                    |
//                                    context             options

// 'apiProxy' is now ready to be used as middleware in a server.
  • context: Determine which requests should be proxied to the target host.
    (more on )
  • options.target: target host to proxy to. (protocol + host)

(full list of )

createProxyMiddleware(uri )

// shorthand syntax for the example above:
const apiProxy = createProxyMiddleware('http://www.example.org/api');

More about the .

2.7.12 (2015-06-17)

  • client-script: allow proxy to also use client script middleware (c5fdbbf)
  • client-script: serve cached/gzipped client JS file — fixes #657 (dbe9ffe), closes #657

<a name»2.7.11″>

2.7.11 (2015-06-16)

client-scroll: add scrollRestoreTechnique option as alternative to cookie for restoring scroll (7897ea6a, closes #630)

<a name»2.7.9″>

2.7.9 (2015-06-11)

  • cli: Remove —exclude flag — (133aa1a6, closes #667)
  • proxy: only rewrite domains within attributes (via foxy bump to 11.0.2) — (d80d9481, closes #647)

<a name»2.7.7″>

2.7.7 (2015-06-09)

plugins: Allow plugins to register middleware via server:middleware hook when in proxy mo (104dbb4a, closes #663)

<a name»2.7.6″>

plugins: allow module references in options.plugins array — (aabc03c8, closes #648)

<a name»2.7.5″>

2.7.5 (2015-05-26)

file-watcher: defer to default callback should fn property be absent from file watching obje (9f826cbe, closes #643)

<a name»2.7.3″>

2.7.3 (2015-05-24)

  • file-watching: bind public running instance to watch callbacks given in options — (d7c96e4f, closes #631)
  • snippet: Bump resp-modifier to allow more flexible whitelist/blacklist paths for snippet (f09c2797, closes #553)

Features

rewrite-rules: enable live updating of rewrite rules for both static server & proxy (a4e2bf6f)

<a name»2.7.1″>

2.7.1 (2015-05-06)

web-sockets: revert handling upgrade event on proxy as it causes regression fix #606 (1c6b1c03)

<a name»2.6.8″>

cli: Allow absolute paths for config file — (8fcd9048, closes #583)

<a name»2.6.5″>

2.6.5 (2015-04-25)

file-watching: use canLogFileChange() to determine whether file:reload, stream:changed & browse (164154ea, closes #479)

<a name»2.6.1″>

Конфигурация gulp

Настройка сборщика осуществляется через файл gulpfile.js, который необходимо создать в корне проекта.

Подключим все зависимости:

gulpfile.js

JavaScript

const gulp = require(‘gulp’),
pug = require(‘gulp-pug’),
browserSync = require(‘browser-sync’);

const reload = browserSync.reload;

1
2
3
4
5
6
7

constgulp=require(‘gulp’),

pug=require(‘gulp-pug’),

browserSync=require(‘browser-sync’);

constreload=browserSync.reload;

Отдельно выносим функцию reload объекта browserSync, потому что мы будем ей часто пользоваться.

Напишем gulp-таск для транспиляции pug-кода в html:

JavaScript

gulp.task(‘pug’, function() {
gulp.src(‘./pug/index.pug’)
.pipe(pug({ pretty: true }))
.pipe(gulp.dest(‘./dist’))
});

1
2
3
4
5
6
7

gulp.task(‘pug’,function(){

gulp.src(‘./pug/index.pug’)

.pipe(pug({prettytrue}))

.pipe(gulp.dest(‘./dist’))

});

Теперь добавим наблюдатель, который будет отслеживать изменения всех pug-файлов и обновлять транспилированный код:

JavaScript

gulp.task(‘watcher’, function() {
gulp.watch(‘./pug/**/*.pug’, (event, sb) => {
gulp.start(‘pug’);
});
});

1
2
3
4
5
6
7

gulp.task(‘watcher’,function(){

gulp.watch(‘./pug/**/*.pug’,(event,sb)=>{

gulp.start(‘pug’);

});

});

Теперь, запустив оба таска по очереди, можно вручную обновлять браузер и сразу видеть изменения:

PowerShell

gulp pug
gulp watcher

1
2
3
4

gulp pug

gulp watcher

Но это неудобно, давайте прикрутим синхронизацию с браузером.

Context matching

  • path matching

    • — matches any path, all requests will be proxied.
    • — matches any path, all requests will be proxied.
    • — matches paths starting with
  • multiple path matching

    createProxyMiddleware([‘/api’, ‘/ajax’, ‘/someotherpath’], {…})

  • wildcard path matching

    • matches any path, all requests will be proxied.
    • matches any path which ends with
    • matches paths directly under path-absolute
    • matches requests ending with in the path of
    • combine multiple patterns
    • exclusion

    Note: In multiple path matching, you cannot use string paths and wildcard paths together.

  • custom matching

    For full control you can provide a custom function to determine which requests should be proxied or not.

    /**
     * @return {Boolean}
     */
    const filter = function (pathname, req) {
      return pathname.match('^/api') && req.method === 'GET';
    };
    
    const apiProxy = createProxyMiddleware(filter, {
      target: 'http://www.example.org',
    });

BrowserSync and Gulp task-runner

Still one of the best task-runners available to the community. To set up a BrowserSync GULP task, we need to have GULP installed. To install GULP, just run the following command:

In the root of your project folder, create a file named . In that file create a gulp task named .

To trigger this command, from the terminal run

What this does is the same as the BrowserSync command we ran earlier. BrowserSync monitors the directory defined in and whenever we run the command, the page reloads.

You might have already setup a server somewhere on your computer, and you want to keep it that way; Like I mentioned earlier, BrowserSync can act as a proxy to an existing server. To do so just:

The option points to the server you want to make a proxy. If your server makes use of WebSockets, you need to tell BrowserSync to enable WebSockets.

NOTE: BrowserSync has more options than just server and proxy. Take a look at some of the other options.

TL;DR

Proxy requests to

// javascript

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');

const app = express();

app.use('/api', createProxyMiddleware({ target: 'http://www.example.org', changeOrigin: true }));
app.listen(3000);

// http://localhost:3000/api/foo/bar -> http://www.example.org/api/foo/bar
// typescript

import * as express from 'express';
import { createProxyMiddleware, Filter, Options, RequestHandler } from 'http-proxy-middleware';

const app = express();

app.use('/api', createProxyMiddleware({ target: 'http://www.example.org', changeOrigin: true }));
app.listen(3000);

// http://localhost:3000/api/foo/bar -> http://www.example.org/api/foo/bar

All can be used, along with some extra .

Браузерная синхронизация

Теперь когда вы имеете свой локальный сайт с автоматически перегружаемым предпросмотром, вы могли бы закончить чтение этого урока и инструменты с которыми вы научились работать было бы для вас вполне достаточно для превосходной разработки ваших проектов. Однако, когда дело доходит до тестирования в разных браузерах и устройствах, также имеется BrowserSync который заслуживает вашего внимания.

С BrowserSync вы можете протестировать ваш проект в любом браузере на любом устройстве, в одном подключении в разных окнах.

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

Использование BrowserSync в Grunt

Чтобы установить grunt-browser-sync плагин в ваш Grunt проект запустите команду:

Закоментируйте или удалите строку кода grunt-express из файла Gruntfile:

Потом добавьте строку кода grunt-browser-sync заместо того кода:

Закомментируйте или удалите задачу которую вы добавили ранее, и добавьте другой код для задачи :

В задаче и поменяйте на :

….должно стать так:

Сейчас когда вы запустите команду:

…вы увидите локальный сайт открывшийся для предварительного просмотра, и он по прежнему будет отслеживать изменения, и автоматически перезагружаться, но отличие в том что сейчас активизировалась браузерная синхронизация, и у вас есть возможность делать предварительный просмотр вашего локального сайта в других браузерах и устройствах.

В командной строке после запуска вашего BrowserSync сервера вы увидите следующее:

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

Использование BrowserSync в Gulp

Сейчас мы выполним похожее действие, на этот раз используя плагин browser-sync для Gulp.

Установите этот плагин в ваш Gulp проект командой:

В Gulpfile закоментируйте или удалите следующую строку:

…и замените это на:

Закоментируйте или удалите существующий код для задачи и добавьте вместо него код для задачи :

В конце css и html задач перейдите к строке:

…и замените каждую из этих двух строк кода на:

И под конец перейдите к существующему коду задачи и замените запускаемую задачу на :

…чтобы стало так:

Теперь когда вы запустите команду:

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

Для более подробной информации о BrowserSync в Gulp посетите страницу:

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

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

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

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

WebSocket

// verbose api
createProxyMiddleware('/', { target: 'http://echo.websocket.org', ws: true });

// shorthand
createProxyMiddleware('http://echo.websocket.org', { ws: true });

// shorter shorthand
createProxyMiddleware('ws://echo.websocket.org');

External WebSocket upgrade

In the previous WebSocket examples, http-proxy-middleware relies on a initial http request in order to listen to the http event. If you need to proxy WebSockets without the initial http request, you can subscribe to the server’s http event manually.

const wsProxy = createProxyMiddleware('ws://echo.websocket.org', { changeOrigin: true });

const app = express();
app.use(wsProxy);

const server = app.listen(3000);
server.on('upgrade', wsProxy.upgrade); // <-- subscribe to http 'upgrade'

2.6.0 (2015-04-12)

Bug Fixes

  • open: Allow open: ‘ui’ and open: ‘ui-external’ when in snippet mode — (d0333582, closes #571)
  • server: set index correctly if serveStaticOptions: {index: } given (34816a76)

Features

  • cli: allow ‘browser’ option from cli — (ca517d03, closes #552)
  • client: Bump client to allow wildcards in reload method — (1e4de8f7, closes #572)
  • commands: Add reload command for http-protocol comms (c0fe70dc)
  • file-watcher: Add to public api (6a2609f0)
  • http-protocol:
    • Add support for https comms (efd4f39c)
    • Add reload method to http protocol (f6a3601f)
  • plugins: Accept object literal as plugin + options (757f492e)
  • reload: Add reload-delay and reload-debounce to cli -, (38d62c96, closes #329, #562)
  • stream: Implement dedicated method for better handling streams & to pave the (2581e7a1)
  • watchers:
    • Allow per-watcher options hash. (3c069fba)
    • switch to chokidar for file-watching, implement callback interface on per-patter (14afddfc)

<a name»2.5.1″>

Bug Fixes

  • proxy: Bump foxy dep to ensure middlewares work correctly for old IEs (104e9dd1)
  • snippet: Log UI access urls when in snippet mode (c448fa0b)

<a name»2.5.0″>

Browser-sync и PHP-файлы

Измените файл index.html на index.php и подправьте пути так:

Это предполагает, что вы хотите работать с PHP, а не только с HTML. Перейдите к командной строке, остановите текущий процесс через Ctrl + C, а затем запустите gulp снова.

Gulp выполнит ваше приложение на http://localhost:8080, но вы увидите только это на странице:

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

Всё, что нам нужно сейчас сделать — это запустить сервер PHP вместе с нашими задачами. Для этого мы используем плагин gulp-connect-php.

Using BrowserSync

First we will use BrowserSync with static files. Assuming you have a directory structure like:

And from the root of your project directory run the following command

This instructs BrowserSync to watch all HTML and CSS files. Once you run the command, a browser window opens in the default browser serving the directories root file, in this case . In the console of the running BrowserSync start command, you should see the following result.

  • Local: represents the address on your local machine with which you can view the project.
  • External: represents the address that any user on you local network(LAN or wifi) can view the project.
  • UI: will be talked about below.

2.4.0 (2015-03-21)

rewrite: Allow addtional HTML rewrite rules through server + proxy modes to help with #51 (76ae686d)

<a name»2.3.2″>

client: Bump UI to fix safari deprecated error messages — fix #445 (6bb7513c)

<a name»2.2.5″>

plugins: Allow plugins to be given inline within options hash (fd4ccd9e)

reload: Allow multiple instances to call their own .reload() method — (da53dc21, closes #511)

socket: Set heartbeat interval correctly — (7621c0de, closes #499)

2.2.2 (2015-03-04)

  • paths: Fix regression with absolute/relative paths to scripts/sockets/https etc — (2386fe1b, closes #463)
  • snippet: Allow serving the client js over https when in snippet mode — (196bafbe, closes #459)
  • socket: Bump socket io + client to fix #477 & https://github.com/Browsersync/browser-syn (659c281e)
  • cli: allow disable injection via cli — (12ffbd79, closes #444)
  • snippet:
    • Allow serving the client js over https when in snippet mode — (196bafbe, closes #459)
    • Allow serving the snippet on secure server + base url — re: #437 (96d689c0)
    • Always use full url path for scripts — (14bd6f51, closes #437)

Отчёт: география и посещаемость сайта

Отчёт в графической форме показывает объём посещений сайта browsersync.io, в динамике, с привязкой к географическому размещению активных пользователей данного сайта.
Отчёт доступен для сайтов, входящих в TOP-100000 рейтинга Alexa. Для всех остальных сайтов отчёт доступен с некоторыми ограничениями.

Alexa Rank – рейтинговая система оценки сайтов, основанная на подсчете общего количества просмотра страниц и частоты посещений конкретного ресурса. Alexa Rank вычисляется исходя из показателей за три месяца. Число Alexa Rank – это соотношение посещаемости одного ресурса и посещаемости прочих Интернет-порталов, поэтому, чем ниже число Alexa Rank, тем популярнее ресурс.

Features of BrowserSync

Table of Contents

  • Live reloading: This is probably the most important feature of BrowserSync. change your code and the page is auto-reloaded. Live reloading works across many browsers and devices.
  • Interaction synchronization: It means that all your actions are mirrored across every browser. This little feature is useful for testing, especially, when testing across many devices. You can also customize what actions are mirrored across browsers.
  • Simulate slower connections: I believe you are expecting users from all over the world, and some countries are not fortunate enough to have fast internet connection; BrowserSync has a feature that you can use to throttle your website connection speed.
  • URL history: BrowserSync logs all browsing history so you can push a test URL to all devices.
  • Extra: BrowserSync is compatible with many task runners like GULP and Grunt. And they work across many operating systems.

Автоматическая перезагрузка

Замечание: Чтобы избежать путаницы, существует приложение для рабочего стола и сочетание расширения для браузера Chrome называемое LiveReload которое часто используется вместе с множеством npm пакетов чтобы управлять автоматической перезагрузкой. Мы не будем рассматривать их, выберите любой из двух подходов сами.

Автоматическая перезагрузка с помощью Grunt

Чтобы обеспечить работу автоматической перезагрузки должен быть локальный хост который будет перезагружен, то есть способ показа вашего сайта локально по протоколу вместо .

Для того чтобы в вашем Grunt проекте статические файлы были доступны по локальному хосту, и работала автоматическая перезагрузка, используется плагин grunt-express.

Установка grunt-express в ваш проект командой:

Затем включите этот плагин в вашем Gruntfile добавив после существующих строк строки:

Настройте express плагин добавив следующий код:

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

Сейчас мы добавим новую задачу . Мы будем использовать эту задачу для запуска двух задач  и сразу.

Добавьте после существующих строк строку:

Теперь запустите команду:

…и вы увидите как откроется браузер по умолчанию с вашим проектом.

Запущенная задача будет компилировать ваши Stylus и Jade файлы после каждого сохранения в папку «build».

Express отслеживает изменения сделанные в папке «build» для ваших HTML, CSS или JS которые были перекомилированы и будет автоматически перегружать браузер.

Автоматическая перезагрузка с помощью Gulp

Двинемся дальше и сделаем такое же автоматическое обновление на локальном хосте в Gulp проекте. На этот раз мы собираемся использовать gulp-connect вместо предыдущего.

Установите gulp-connect в ваш проект командой:

Сделайте это доступным в вашем Gulpfile добавив после остальных строк где используется функцию:

Установите новую задачу добавив под остальными задачами следующий код:

Также как мы сделали с Grunt, мы теперь собираемся создать такую же задачу называемую которая будет отслеживать изменения в файлах и перезагружать страницу в локальном хосте.

Добавьте следующую строчку кода внизу вашего Gulpfile:

Чтобы включить автоматическую перезагрузку, мы собираемся добавить другие «pipe» в конце двух задач и

Добавьте этот обработчик в конце каждого:

После добавления код задач становится таким для css:

….и таким для html:

Теперь осталось запустить команду:

…по сравнению с Grunt здесь нужно перейти вручную по адресу http://localhost:8080 и вы увидите ваш локальный сайт.

Сделайте какие-нибудь изменения в вашем Jade или Stylus файле сохраните, и тогда проект будет скомпилирован снова и в браузере произойдет автоматическая перезагрузка.

Активация browser-sync

Модуль browser-sync нужно инициализировать, а затем вызывать метод перезагрузки в нужных местах.

Таск инициализации выглядит примерно так:

PowerShell

gulp.task(‘browser-sync’, function() {
browserSync.init({
server: {
baseDir: ‘./dist’
}
})
});

1
2
3
4
5
6
7
8
9

gulp.task(‘browser-sync’,function(){

browserSync.init({

server{

baseDir’./dist’

}

})

});

У модуля много настроек, их можно посмотреть на его странице на npmjs.

Если из консоли мы вызовем этот таск на выполнение, в браузере автоматически откроется страница ./dist/index.html.

Теперь добавим перезагрузку к задаче pug:

JavaScript

gulp.task(‘pug’, function() {
gulp.src(‘./pug/index.pug’)
.pipe(pug({ pretty: true }))
.pipe(gulp.dest(‘./dist’))
.pipe(reload({ stream: true }))
});

1
2
3
4

6
7
8

gulp.task(‘pug’,function(){

gulp.src(‘./pug/index.pug’)

.pipe(pug({prettytrue}))

.pipe(reload({streamtrue}))

});

И создадим дефолтный таск, который будет запускать все задачи в правильном порядке:

JavaScript

gulp.task(‘default’, );

1
2
3

gulp.task(‘default’,’watcher’,’browser-sync’,’pug’);

Примерно такой gulpconfig.js я использую для верстки простых лендингов. Он позволяет удобно использовать простые шаблонизаторы, процессоры CSS и прочие полезные штуки без особых сложностей и сборок.

Подведем итоги

Расширением имеет явные плюсы в сравнении с другими расширениями по типу кроссплатформенности и работоспособности во всех популярных браузерах, то есть не нужно будет привыкать к разному интерфейсу, а главное функционалу

Помимо этого имеет как раз неплохой функционал по типу импорта/экспорта прокси и, что немаловажно, достаточно интуитивный интерфейс. Но и минусы, к сожалению, имеются — расширение иногда подглючивает и нуждается в перезагрузке браузера для корректной работы, поэтому мы все же рекомендуем отходить от расширений к специализированному софту по типу Proxifier

Оцените статью
Рейтинг автора
5
Материал подготовил
Андрей Измаилов
Наш эксперт
Написано статей
116
Добавить комментарий