Javascript Gulp Browsersync任务在使用新文件结构进行文件更改时不重新加载

将我的项目更改为组织到

src/

和

dist/

文件夹后，我的更改不会被编译，我的browsersync任务也不再重新加载页面。例如，如果更改div的颜色，即使停止并重新启动gulp任务，颜色也不会更新。因此，我的问题是，如何更改gulp任务以监视我正在使用的新文件结构中的更改，以及在监视任务识别到文件更改后如何触发重新加载任务？我认为在这个gulpfile

gulp.watch的前一个工作版本上，重新加载任务是有效的，所以它似乎没有问题。我试着根据答案将
gulp.watch
更改为
browserSync.watch
，但没有解决问题

我猜这是我的手表任务或browsersync.init的问题，但我完全被难住了

为了清楚起见，我正在使用Jade、Bourbon Neat、SCSS、Gulp和Browsersync制作一个静态网页

如果有帮助的话，为这个项目的完整GitHub回购干杯

这是我当前的文件结构：

/
  dist/
    css/
    js/
    index.html
  node_modules/
  src/
    jade/
    js/
    scss/
  .gitignore
  gulpfile.js
  package.json

这是我的
gulpfile.js
：

// VARIABLES

var gulp                    = require('gulp');
var jade                    = require('gulp-jade');
var sass                    = require('gulp-sass');
var sourcemaps              = require('gulp-sourcemaps');
var autoprefixer            = require('gulp-autoprefixer');
var cssmin                  = require('gulp-cssmin');
var neat                    = require('node-neat').includePaths;
var concat                  = require('gulp-concat');
var uglify                  = require('gulp-uglify');
var rename                  = require('gulp-rename');
var browserSync             = require('browser-sync');
var reload                  = browserSync.reload;


// TASKS



// Jade task
gulp.task('jade', function() {
    return gulp.src('src/jade/**/*.jade')
    .pipe(jade({ pretty: true }))
    .pipe(gulp.dest('dist/'))
});


// SCSS task
gulp.task('scss', function() {
    return gulp.src('src/scss/**/*.scss')
    .pipe(sass({ style: 'compressed', 
        noCache: true,
        includePaths: neat }))
    .pipe(autoprefixer())
    .pipe(cssmin())
    .pipe(rename({
        suffix: '.min'
    }))
    .pipe(gulp.dest('dist/css'))
});

// JS task
gulp.task('js', function() {
    return gulp.src('src/js/**/*.js')
    .pipe(uglify())
    .pipe(rename({
        suffix: '.min'
    }))
    .pipe(gulp.dest('dist/js/'))
});

// Watch files for changes
gulp.task('watch', ['browser-sync'], function() {
    gulp.watch('dist/**/*.html', reload);
    gulp.watch('src/scss/**/*.scss', ['scss', reload]);
    gulp.watch('src/**/*.jade', ['jade']);
    gulp.watch('src/**/*.js', ['js']);
});

// Start Browsersync server
gulp.task('browser-sync', function() {
    browserSync.init(['dist/css/**/*.css', 'dist/js/**/*.js'], {
        server: {
            baseDir: "dist/"
        }
    });
});

// Default task
gulp.task('default', ['scss', 'jade', 'js', 'watch', 'browser-sync']);

我已经撤销了你的回购协议，并进行了一些修复，我将推进“修复”分支。几件事：


您的index.html引用了未统一的css，而您只导出了缩小的css
监视列表需要预先设置子文件夹，因此
gulp.watch（'src/js/***.js'，['js']）而不是
吞咽.watch（'src/***/.js'，['js']）

您的
browserSync.init
引用了错误的目录（src而不是dist）
对我有效的方法是将
gulp.watch
切换到
browserSync.watch
。BrowserSync的文档表明，此功能至少需要2.6.0版。因此，如果不使用BrowserSync版本，您可能需要更新该版本。
您是否检查了此答案？哦，不。谢谢，我会试试这个并更新问题。那没用：/我会更新问题。非常感谢！我以为我尝试了所有这些改变，但结果我没有一起尝试。你太棒了！