BrowserSync not refreshing my VS2015 with IIS Express?

Question

I am trying to use BrowserSync with VS2015. Here's what I have so far:

/// <binding BeforeBuild='scripts, less, css' ProjectOpened='watch' />
"use strict";

var browserSync = require('browser-sync');
var concat = require('gulp-concat');
var del = require('del');
var gulp = require('gulp');
var gzip = require('gulp-gzip');
var less = require('gulp-less');
var minifyCSS = require('gulp-minify-css');
var reload = browserSync.reload;
var uglify = require('gulp-uglify');

var cssconfig = {
    src: [
         'wwwroot/content/less/normalize.css',
         'wwwroot/content/less/alert.css',
         'wwwroot/content/less/auth.css',
         'wwwroot/content/less/body.css',
         'wwwroot/content/less/breadcrumb.css',
         'wwwroot/content/less/button-groups.css',
         'wwwroot/content/less/button.css',
         'wwwroot/content/less/carousel.css',
         'wwwroot/content/less/checkbox.css',
         'wwwroot/content/less/content.css',
         'wwwroot/content/less/dropdowns.css',
         'wwwroot/content/less/font-awesome.css',
         'wwwroot/content/less/fonts.css',
         'wwwroot/content/less/form.css',
         'wwwroot/content/less/generic.css',
         'wwwroot/content/less/grid-user.css',
         'wwwroot/content/less/grid.css',
         'wwwroot/content/less/header.css',
         'wwwroot/content/less/home.css',
         'wwwroot/content/less/html-dark.css',
         'wwwroot/content/less/html-light-user.css',
         'wwwroot/content/less/html-light.css',
         'wwwroot/content/less/html-user.css',
         'wwwroot/content/less/html.css',
         'wwwroot/content/less/loading-bar.css',
         'wwwroot/content/less/media-breadcrumb.css',
         'wwwroot/content/less/media-grid.css',
         'wwwroot/content/less/media-gridInfo.css',
         'wwwroot/content/less/media-header.css',
         'wwwroot/content/less/media-question.css',
         'wwwroot/content/less/media.css',
         'wwwroot/content/less/modal.css',
         'wwwroot/content/less/pagedown.css',
         'wwwroot/content/less/print.css',
         'wwwroot/content/less/question.css',
         'wwwroot/content/less/tabs.css',
         'wwwroot/content/less/wmd.css',
    ],
}

var jsconfig = {
    src: [
        'wwwroot/lib/pagedown/Markdown.Converter.js',
        'wwwroot/lib/pagedown/Markdown.Sanitizer.js',
        'wwwroot/lib/pagedown/Markdown.Editor.js',
        'wwwroot/lib/angular/angular.js',
        'wwwroot/lib/angular-cookies/angular-cookies.js',
        'wwwroot/lib/angular-loading-bar/build/loading-bar.min.js',
        'wwwroot/lib/angular-translate/angular-translate.js',
        'wwwroot/lib/angular-translate-loader-static-files/angular-translate-loader-static-files.js',
        'wwwroot/lib/angular-translate-storage-cookie/angular-translate-storage-cookie.js',
        'wwwroot/lib/angular-translate-storage-local/angular-translate-storage-local.js',
        'wwwroot/lib/angular-ui-router/release/angular-ui-router.js',
        'wwwroot/lib/angular-bootstrap/ui-bootstrap-tpls.js',
        'wwwroot/app/controllers/ModalInstance.js',
        'wwwroot/app/services/AlertService.js',
        'wwwroot/app/services/AuthService.js',
        'wwwroot/app/services/ErrorService.js',
        'wwwroot/app/services/ExamService.js',
        'wwwroot/app/services/QuestionService.js',
        'wwwroot/app/services/StateService.js',
        'wwwroot/app/services/SubjectService.js',
        'wwwroot/app/services/TestService.js',
        'wwwroot/app/services/UserService.js',
        'wwwroot/app/access/controllers/WebApiController.js',
        'wwwroot/app/access/access.js',
        'wwwroot/app/auth/auth.js',
        'wwwroot/app/exams/controllers/ExamsController.js',
        'wwwroot/app/exams/exam.js',
        'wwwroot/app/questions/controllers/QuestionsController.js',
        'wwwroot/app/questions/question.js',
        'wwwroot/app/tests/controllers/DeleteTestController.js',
        'wwwroot/app/tests/controllers/MarkTestController.js',
        'wwwroot/app/tests/controllers/RefreshTestController.js',
        'wwwroot/app/tests/controllers/TestsController.js',
        'wwwroot/app/tests/test.js',
        'wwwroot/app/appConfig.js',
        'wwwroot/app/appController.js',
        'wwwroot/app/appRun.js',
        'wwwroot/app/app.js',
        'wwwroot/app/directives/dropdown.js',
        'wwwroot/app/directives/dropdownLink.js',
        'wwwroot/app/directives/pagedownPreview.js',
        'wwwroot/app/directives/pagedownAdmin.js',
        'wwwroot/app/filters/range.js',
        'wwwroot/app/filters/sdate.js',
        'wwwroot/app/filters/truncate.js',
    ],
}

var gzip_options = {
    threshold: '1kb',
    gzipOptions: {
        level: 9
    }
};

gulp.task('browser-sync', function () {
    var files = [
      'wwwroot/content/**/*/.html',
      'wwwroot/content/less/html.css'
    ];

    browserSync.init(files, {
        server: {
            baseDir: "./"
        }
    });
});

gulp.task('clean-css', function () {
    del.sync(['wwwroot/content/bundles/css.min.css'])
});

gulp.task('clean-js', function () {
    del.sync(['wwwroot/content/bundles/js.min.js'])
});

gulp.task('default', ['browser-sync'], function () {
    gulp.watch('wwwroot/content/less/*.less', ['less']);
    gulp.watch('wwwroot/content/less/*.css', reload);
});

gulp.task('less', function () {
    gulp.src('wwwroot/content/less/*.less')
        .pipe(less())
        .pipe(gulp.dest('wwwroot/content/less'));
});

gulp.task('scripts', ['clean-js'], function () {
    return gulp.src(jsconfig.src)
      .pipe(uglify())
      .pipe(concat('js.min.js'))
      .pipe(gulp.dest('wwwroot/content/bundles/'))
      .pipe(gzip(gzip_options))
      .pipe(gulp.dest('wwwroot/content/bundles/'));
});

gulp.task('css', ['clean-css'], function () {
    return gulp.src(cssconfig.src)
      .pipe(minifyCSS())
      .pipe(concat('css.min.css'))
      .pipe(gulp.dest('wwwroot/content/bundles/'))
      .pipe(gzip(gzip_options))
      .pipe(gulp.dest('wwwroot/content/bundles/'));
});

When I run default I get this output:

[BS] Access URLs:
 ----------------------------------------
       Local: http://localhost:3000
    External: http://192.168.243.139:3000
 ----------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.243.139:3001
 ----------------------------------------
[BS] Serving files from: ./
[BS] Watching files...

When the html.less file is changed I see that it tries a refresh:

[BS] Reloading Browsers...
[BS] File changed: wwwroot/content/less/html.css
[BS] Reloading Browsers...
[BS] Reloading Browsers...

But nothing changes on the browser and I don't see any refresh happen.

Can someone with experience of this point me in the right direction?

Thanks

Answer 1

Try writing /flush behind your address and hit enter. Hope it helps.

Answer 2

browserSync.init(files, { server: { baseDir: "./" } }); instead of this option use other

    browserSync.init({
        proxy: "[**it_is_the_url_which_VisiulStudio_does**]", 
        files: [ 
  'wwwroot/content/**/*/.html',
  'wwwroot/content/less/html.css'
]            
    });