Setting up a test server with Gulp, PHP and browser-sync

Question

I've inherited a static project using Gulp (which i'm new to) and the client is asking to add server side functionality. I'm trying to perform local development with php and gulp as well as using browser-sync.

I have checked that php is installed as is the gulp-connect-php dependency. This is my gulpfile.js:

var gulp    = require('gulp');
var connect     = require('gulp-connect-php');
var concat  = require('gulp-concat');
var changed = require('gulp-changed');
var nano    = require('gulp-cssnano');
var browserSync      = require('browser-sync');

gulp.task('default', ['browser-sync']);

gulp.task('connect-sync', function() {
  connect.server({}, function (){
    browserSync({
      proxy: '127.0.0.1:8000'
    });
  });

  gulp.watch(["./build/**/*.html","./build/**/*.php", "./build/**/*.js","./build/img/**/*"]).on('change', function () {
    browserSync.reload();
  });
});



gulp.task('watch', ['html-include', 'php', 'css', 'scripts', 'assets', 'fonts'], function() {
    gulp.watch('./source/**/*.html', ['html-include']);
    gulp.watch('./source/**/*.js', ['scripts']);
    gulp.watch('./source/**/*.css', ['css']);
    gulp.watch('./source/img/**/*', ['assets']);
    gulp.watch('./source/fonts/**/*', ['fonts']);
});

gulp.task('html-include', function() {    
    return gulp.src('./source/**/*.html') // Ignores template files
        .pipe(changed('./source/**/*.html'))      
        .pipe(gulp.dest('./build/'));
});

gulp.task('php', function() {    
    return gulp.src('./source/**/*.php') // Ignores template files
        .pipe(changed('./source/**/*.php'))      
        .pipe(gulp.dest('./build/'));
});

gulp.task('scripts', function() {
    return gulp.src('./source/js/*.js')
        .pipe(changed('./build/js/**/*')) // Ignore unchanged files
        .pipe(gulp.dest('./build/js/'));
});

gulp.task('assets', function() {
    return gulp.src('./source/img/**/*')
        .pipe(changed('./build/img/**/*')) // Ignore unchanged files
        .pipe(gulp.dest('./build/img'));
});

gulp.task('fonts', function() {
    return gulp.src('./source/fonts/**/*')
        .pipe(changed('./build/fonts/**/*')) // Ignore unchanged files
        .pipe(gulp.dest('./build/fonts'));
});

gulp.task('css', function() {
    return gulp.src('./source/css/*.css')    
        .pipe(concat('cic.min.css'))
        .pipe(nano()) // Only enable for deployment, too slow for development
        .pipe(gulp.dest('./build/css/'))
        .pipe(browserSync.stream());
});

When I try and run gulp with this file I get the following error:

Task 'browser-sync' is not in your gulpfile Please check the documentation for proper gulpfile formatting

As I say I'm new to gulp and just want to get a test server up and running for local development.

Any suggestions on how to reformat my code to work.

Thanks

Update - Ok I've managed to get the server up and running with the following Gulpfile code:

var gulp        = require('gulp');
var concat      = require('gulp-concat');
var changed     = require('gulp-changed');
var phpConect   = require('gulp-connect-php');
var nano        = require('gulp-cssnano');
var sass        = require('gulp-sass');
var bs          = require('browser-sync');

gulp.task('default', ['browser-sync']);

gulp.task('php', function() {
    phpConect.server({ base: 'build/', port: 8010, keepalive: true});
});

gulp.task('browser-sync', ['php','watch'], function() {
    bs({
        proxy: '127.0.0.1:8010',
        port: 8080,
        open: true,
        notify: false
    });
    gulp.watch(["./build/**/*.html","./build/**/*.php","./build/**/*.js","./build/img/**/*"]).on('change', bs.reload);
});

gulp.task('watch', ['html-include', 'php-files', 'sass', 'scripts', 'assets', 'fonts'], function() {
    gulp.watch('./source/**/*.html', ['html-include']);
    gulp.watch('./source/**/*.php', ['php-files']);
    gulp.watch('./source/**/*.js', ['scripts']);
    gulp.watch('./source/**/*.scss', ['sass']);
    gulp.watch('./source/img/**/*', ['assets']);
    gulp.watch('./source/fonts/**/*', ['fonts']);
});

gulp.task('html-include', function() {    
    return gulp.src('./source/**/*.html') // Ignores template files  
        .pipe(changed('./build/**/*'))  
        .pipe(gulp.dest('./build/'));
});

gulp.task('php-files', function() {    
    return gulp.src('./source/**/*.php') // Ignores template files
        .pipe(changed('./build/**/*'))      
        .pipe(gulp.dest('./build/'));
});

gulp.task('scripts', function() {
    return gulp.src('./source/js/*.js')
        .pipe(changed('./build/js/**/*')) // Ignore unchanged files
        .pipe(gulp.dest('./build/js/'));
});

gulp.task('assets', function() {
    return gulp.src('./source/img/**/*')
        .pipe(changed('./build/img/**/*')) // Ignore unchanged files
        .pipe(gulp.dest('./build/img'));
});

gulp.task('fonts', function() {
    return gulp.src('./source/fonts/**/*')
        .pipe(changed('./build/fonts/**/*')) // Ignore unchanged files
        .pipe(gulp.dest('./build/fonts'));
});

gulp.task('sass', function() {
    return gulp.src('./source/sass/*.scss') 
        .pipe(sass())
        .pipe(concat('style.min.css'))
        .pipe(nano()) // Only enable for deployment, too slow for development
        .pipe(gulp.dest('./build/css/'))
        .pipe(bs.stream());
});

But now when I preview my files in safai (and only safari) the video files aren't being served at all., even though they're there. Is this a known issue with php/gulp development in a local environment?

Dan