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.gitnpm 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: ./
http://url.ie/zrcw
Hackgirls - Browser Sync
By Miguel Cantillana
