Browser Sync Gulp设置不适用于.NET MVC

Question

我正在尝试为.NET MVC应用程序设置一个gulp浏览器同步构建系统,除了每次进行更改时使用浏览器同步进行实时重新加载外,一切都正常工作.这是我有史以来的第一次尝试,所以我可能会做一些简单的错误.这是我的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
    });
});

当我运行时gulp watch工作正常,因为线路被记录到控制台,只是没有实时重新加载.我已经吃了不少博客文章无济于事,有什么想法吗？

编辑:浏览器同步从代理启动网站,只要我在列出的目录中更改CSS或JS文件,gulp watch就可以选择,但浏览器同步不会.我必须手动刷新

Answer 1

试试这个：

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);
});

如果您需要一个示例，您可以在此骨架应用程序存储库中看到： https: //github.com/aurelia/sculpture-navigation/blob/master/build/tasks/watch.js

（我已链接“观看”任务，但如果您需要更多示例，您可以导航到其他任务！）