Browser Sync Gulp setup not working with .NET MVC

Question

I am trying to setup a gulp browser-sync build system for a .NET MVC application, everything work except for the live reload with browser sync whenever a change is made. This is my first attempt ever, so I could be doing something simple wrong. Here's my gulpfile.js

var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    jshint = require('gulp-jshint'),
    watch = require('gulp-watch'),
    livereload = require('gulp-livereload'),
    browserSync = require('browser-sync'),
    concat = require('gulp-concat');

//minify js
gulp.task('minifyJS', function () {
    gulp.src('Scripts/**/*.js')
        .pipe(concat('app.js'))
        .pipe(gulp.dest('Scripts'))
});

gulp.task('minifyCSS', function () {
    gulp.src('Content/**/*.css')
        .pipe(concat('app.css'))
        .pipe(gulp.dest('Content'))
});

//browsersync
gulp.task('browserSync', function () {
    var files = [
       'Scripts/**/*.js',
       'Content/**/*.css',
       'Views/**/*.cshtml'
    ];

    browserSync.init(files, {

        proxy: "http://localhost:55783/"
    });
});

//default task wraps the two
gulp.task('default', ['minifyJS', 'minifyCSS', 'watch', 'browserSync']);

//watch tasks
gulp.task('watch', function () {
    var jsWatcher = gulp.watch('Scripts/**/*.js', ['minifyJS']);
    var cssWatcher = gulp.watch('Content/**/*.css', ['minifyCSS']);

    jsWatcher.on('change', function (event) {
        console.log('Event type: ' + event.type); // added, changed, or deleted
        console.log('Event path: ' + event.path); // The path of the modified file
    });

    cssWatcher.on('change', function (event) {
        console.log('Event type: ' + event.type); // added, changed, or deleted
        console.log('Event path: ' + event.path); // The path of the modified file
    });
});

when I run gulp watch works just fine as the lines are logged to the console, just no live reload. Ive soured quite a few blog posts to no avail, any ideas?

EDIT: Browser-Sync launches the site from the proxy, just whenever I change a CSS or JS file in the listed directories, gulp watch picks up on it but Browser-Sync does not. I have to manually refresh

Answer 1

Try this one:

gulp.task('watch', function () {
    function reportChange(event){
        console.log('Event type: ' + event.type); // added, changed, or deleted
        console.log('Event path: ' + event.path); // The path of the modified file
    }

    gulp.watch('Content/**/*.css', ['minifyCSS', browserSync.reload]).on('change', reportChange);
    gulp.watch('Scripts/**/*.js', ['minifyJS', browserSync.reload]).on('change', reportChange);
});

If you need an example, you could see in this skeleton app repository: https://github.com/aurelia/skeleton-navigation/blob/master/build/tasks/watch.js

(I've linked the Watch task but you could navigate to the others tasks if you need more examples!)

Answer 2

Here is what works in my project

var sourcemaps = require('gulp-sourcemaps');

var viewDir = './src/';
gulp.task('cshtml', function(){
  return gulp.src(viewDir)
    .pipe(livereload({quiet: true}));
});


gulp.task('watch', function() {
  livereload.listen();
  gulp.watch(viewDir + '/**/*.cshtml', ['cshtml']);
});

For chrome make sure the live reload plugin has access to file URL's in the settings and if your page is running under https follow the loading insecure content instructions.