Browser Sync

Miguel Cantillana

http://github.com/mcantillana

http://url.ie/zrcw

Que es browser sync?

Mantiene sincronizado varios navegadores y dispositivos al momento de crear sitios web.

Algunas características

1). Live reload css

2). Live reload javascript

3). Se integra fácilmente con task runners como Grunt y Gulp.

4). Se puede utilizar por separado.

5). Puedes usar proxy para integrarte con otros backend como Ruby on Rails.

Implementación sin task runner

npm install -g browser-sync

// Using files to deliver pages
browser-sync start --files "css/*.css, *.html, *.js"

// Using server to deliver pages
browser-sync start --proxy mywebsite.com --files "/fullpath/css/*.css, /fullpath/*.html, /fullpath/*.js"

Implementación con task runner (Gulp)

npm install browser-sync gulp --save-dev

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var reload      = browserSync.reload;

// Static server
gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });

	gulp.watch("css/*.css").on("change", reload);
	gulp.watch("*.html").on("change", reload);

});

DEMO

git clone

git clone git@github.com:mcantillana/hackgirls_browser_sync.git

npm install

Resolving deltas: 100% (5/5), done.
mcantillana :: Escritorio/hackgirls/hackgirls_browser_sync ‹master› » npm install
npm WARN deprecated node-uuid@1.4.7: use uuid module instead
npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated graceful-fs@1.2.3: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.

...

gulp browser-sync

mcantillana :: Escritorio/hackgirls/hackgirls_browser_sync ‹master› » gulp browser-sync
[12:01:13] Using gulpfile ~/Escritorio/hackgirls/hackgirls_browser_sync/gulpfile.js
[12:01:13] Starting 'browser-sync'...
[12:01:13] Finished 'browser-sync' after 26 ms
[BS] Access URLs:
 ---------------------------------------
       Local: http://localhost:3001
    External: http://192.168.43.202:3001
 ---------------------------------------
          UI: http://localhost:3003
 UI External: http://192.168.43.202:3003
 ---------------------------------------
[BS] Serving files from: ./