我正在尝试为 .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
工作正常,因为这些行已记录到控制台,只是没有实时重新加载。我已经弄坏了很多博客文章无济于事,有什么想法吗?
编辑:Browser-Sync 从代理启动站点,只要我在列出的目录中更改 CSS 或 JS 文件,gulp watch 就会启动它,但 Browser-Sync 不会。我必须手动刷新