Ndtyjky

I want to add Browser Sync to the gulpfile.js, and got so far as below.

It is a Drupal 8 site on MAMP / apache 80.

I have this working script when I run gulp runbsync. I would like to add it to gulp watch.

I have tried various methods to include the task inside of gulp.task('watch:css', all of which simply failed.

  var browserSync = require('browser-sync').create(),

      reload = browserSync.reload;



    //define task

    gulp.task('bsync', function () {

        //spin up dev server

        browserSync.init({

          proxy: "dev.sitename.local",

          hostname: "dev.sitename.local",

          port: 3000, //even if apache is running on 80 or something else

        });



        //when css files change, reload browserSync 

        gulp.watch('./css/*.css').on('change', function () {

            browserSync.reload();

        });



    });



    //call task with 'gulp runbsync'

    gulp.task('runbsync', ['bsync']);

The watch parts are:

// The default task.

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



// Build everything.

gulp.task('build', ['sass', 'drush:cc', 'lint']);



// Default watch task.

// @todo needs to add a javascript watch task.

gulp.task('watch', ['watch:css']);



// Watch for changes for scss files and rebuild.

gulp.task('watch:css', ['sass', 'drush:cc', 'lint:sass'], function () {

  return gulp.watch(options.theme.scss + '**/*.scss', options.gulpWatchOptions, ['sass', 'drush:cc', 'lint:sass']);

});

I dont know if other parts of the file are nessesary so I left them out here and made a repo (you can even send a pull request)

https://github.com/petergus/D8-zurb-foundation-gulp-browsersync/blob/master/gulpfile.js