How to use the browser-sync module with gulp.
Follow @browserSync for news & updates.
##About
For a full list of features, please visit https://github.com/shakyShane/browser-sync
##Usage
First, install browser-sync as a development dependency:
npm install browser-sync --save-devThen, use it within gulpfile.js: (example shows with gulp-sass)
var browserSync = require('browser-sync'); // Static server gulp.task('browser-sync', function() { browserSync.init(null, { server: { baseDir: "./" } }); }); // or... // Proxy to existing vhost gulp.task('browser-sync', function() { browserSync.init(null, { proxy: "yourlocal.dev" }); });There's a full list of available options on the module's repo.
NOTE: at least version 0.8.0 is required for streams support!
###Auto reload & CSS injecting Streams are now supported in BrowserSync, so you can call reload when all your tasks are complete & all browsers will be informed of the changes.
Gulp + SASS + CSS Injecting
Because BrowserSync only cares about your CSS when it's finished compiling - make sure you call reload after gulp.dest
var gulp = require('gulp'); var browserSync = require('browser-sync'); var sass = require('gulp-sass'); // browser-sync task for starting the server. gulp.task('browser-sync', function() { browserSync.init(null, { server: { baseDir: "./" } }); }); // Sass task, will run when any SCSS files change & BrowserSync will auto-update browsers gulp.task('sass', function () { gulp.src('scss/styles.scss') .pipe(sass({includePaths: ['scss']})) .pipe(gulp.dest('css')) .pipe(browserSync.reload({stream:true})); }); // Default task to be run with `gulp` gulp.task('default', ['sass', 'browser-sync'], function () { gulp.watch("scss/*.scss", ['sass']); });Browser Reloading
Sometimes you might just want to reload the page completely (for example, after processing a bunch of JS files) - you can do that by passing once as an option. This will stop reload being call multiple times.
Depending on what version of Browser Sync you're using, you will need to alter this configuration slightly. To check what version you're running, use: npm view browser-sync version
When running Browser Sync versions prior to 0.7.0, use the following:
// start server gulp.task('browser-sync', function() { browserSync.init(null, { server: { baseDir: "./" } }); }); // process JS files and reload all browsers when complete. gulp.task('js', function () { gulp.src('js/*js') .pipe(browserify()) .pipe(uglify()) .pipe(gulp.dest('dist/js')) .pipe(browserSync.reload({stream:true, once: true})); }); // use default task to lauch BrowserSync and watch JS files gulp.task('default', ['browser-sync'], function () { gulp.watch("js/*.js", ['js']); });When running Browser Sync versions of 0.7.0 or higher, use the following:
// Watch CSS files and use the proxy with your own server. browserSync.init(['css/*.css'], { proxy: 'mylocal.dev:8000' });Reloading manually
If the streams support doesn't suit your needs, you can fire the reload method manually by wrapping it in a task. This example will compile/auto-inject CSS when compiled (just as before) but when HTML files are changed, the browsers will be reloaded instead.
// Start the server gulp.task('browser-sync', function() { browserSync.init(null, { server: { baseDir: "./" } }); }); // Compile SASS & auto-inject into browsers gulp.task('sass', function () { gulp.src('scss/styles.scss') .pipe(sass({includePaths: ['scss']})) .pipe(gulp.dest('css')) .pipe(browserSync.reload({stream:true})); }); // Reload all Browsers gulp.task('bs-reload', function () { browserSync.reload(); }); // Watch scss AND html files, doing different things with each. gulp.task('default', ['browser-sync'], function () { gulp.watch("scss/*.scss", ['sass']); gulp.watch("*.html", ['bs-reload']); });###Screencasts Coming soon. If you want to see anything specific covered in the screencasts, please ask me @shaneOsbourne
##Support If you've found Browser-sync useful and would like to contribute to its continued development & support, please feel free to send a donation of any size - it would be greatly appreciated!
