Browser-sync TypeError args.cb is not a function

Question

I'm using browser-sync in gulp task for example :

gulp.task('gulp-task',function(){
    browserSync.init({
        server:{
            baseDir: 'app'
        }
    }) 
    //rest of task 
 });

I use this gulp task in gulp watch for( for example ) app/**/*.html like :

gulp.task('watch',function(){
    gulp.watch('app/**/*.html', ['gulp-task']);
});

for first time change in html files everything is ok but for next changes i get error: TypeError: args.cbn is not a function ...

guys said to install latest version for browser-sync with command below :

npm install browser-sync@latest --save-dev

and it doesn't helped.

I'm getting the same error. what's wrong?

Answer 1

I also ran into this issue and solved it by removing the brackets from the callback in the watch task.

Try changing your watch task to:

 gulp.task('watch',function(){
    gulp.watch(['app/**/*.html'], 'gulp-task');
});

Or better yet, try using the reload method with something like this:

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

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

gulp.task('jshint', function() {
  return gulp.src('src/app/**/*.js')
          .pipe(jshint())
          .pipe(jshint.reporter('jshint-stylish'));
});

// Static server
gulp.task('serve', function() {
  browserSync.init({
      server: {
          baseDir: "./src"
      }
  });
});

gulp.task('watch', function() {
  gulp.watch(['src/**/*.html', 'src/app/**/*.js'], reload);
});

Answer 2

After reading the document of browser-sync,I noticed that the method .init( config, cb ) has two parameters.So,change your code to this:

gulp.task('gulp-task',function(){
    browserSync.init({
        server:{
            baseDir: 'app'
        }
    }) 
    //rest of task 
 },function(){
     // something you want to do
 });

Answer 3

While defining the 'watch' we need to declare what all tasks need to be run before watch, this will sort the problem out. Extra parameter with pre-planned tasks needs to be added in the watch task list of parameters.

gulp.task('watch', ['browserSync', 'sass'], function(){...})

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

gulp.task('hello', function() {
  console.log('Hello Gulp-Shash');
});

gulp.task('sass', function(){
  return gulp.src('app/scss/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('app/css'))
    .pipe(browserSync.reload({
      stream: true
    }))
});

gulp.task('browserSync', function() {
  browserSync.init({
    server: {
      baseDir: 'app'
    },
  })
})

gulp.task('watch', ['browserSync', 'sass'], function(){
  gulp.watch('app/scss/**/*.scss', ['sass']); 
})