javascript - Browser Sync Gulp setup not working with .NET MVC - Stack Overflow

admin管理员组

文章数量:1404924

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

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

• javascript
• gulp
• browser-sync

Share Improve this question Follow asked Apr 20, 2015 at 14:14 user4612487user4612487 28711 gold badge44 silver badges1515 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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./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!)

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.

Could try this peice of code in you gulp-file:

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

    browserSync.init({
        proxy: "http://localhost:55783/"
    });

    gulp.watch("app/*.html").on('change', reload); // all your files go here
});

Everything about this gulp plugin can be read at:
http://www.browsersync.io/docs/gulp/

You can manually trigger the browser sync reload by using a watch in Gulp! Here is some sample code that has a task defined for just that..

gulp.task('watch', [], function () {
    gulp.watch([
        paths.app + '/**/*.html',
        paths.assets + '/**/*.less',
        paths.app + '/**/*.js'
    ], ['browsersync-reload']);
});

//Task that triggers the reload
gulp.task('browsersync-reload', function () {
    browserSync.reload();
});

本文标签： javascriptBrowser Sync Gulp setup not working with NET MVCStack Overflow