How can I get browserSync running with gulp?

Question

I'm following the docs here: http://www.browsersync.io/docs/gulp/

This is what I've built so far:

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



gulp.task('serve',  ['sass'],  function() {

    gulp.task('browser-sync', function() {
        browserSync.init({
            //proxy: "mydevserver",
        server : ".",
            files: ['./index.html', './css/**']
        });
    });

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

} ) ;

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
    return gulp.src("./sass/**")
        .pipe(sass())
        .pipe(gulp.dest("./css/"))
        .pipe(browserSync.stream());
});

gulp.task('default', ['serve']) ;

When I run 'grunt' from the terminal, the 'sass' task works. But I have no indication that browserSync runs. The terminal gives me no feedback on anything relevant to browserSync. If I navigate to 'localhost:3000' or 'localhost:3001' there is nothing running.

Arnaud Gueras Arnaud Gueras · Accepted Answer · 2015-10-28T12:05:57

You create a task in a task, that's why you didn't see anything about browserSync, and you don't need to call BrowserSync.create() and no need to use gulp.watch, browserSync will automatically watch the files you have specified in its config.

Correction :

var browserSync = require('browser-sync');
gulp.task('serve',  ['sass'],  function() {
    browserSync({
        //proxy: "mydevserver",
    server : ".",
       files: ['./index.html', './css/**']
    });
} ) ;

How can I get browserSync running with gulp?

1 Answers