Gulp Browsersync 任务不会重新加载新文件结构的文件更改

Question

将我的项目更改为 src/ 和 dist/ 文件夹后，我的更改没有被编译，我的 browsersync 任务不再重新加载页面。例如，如果我更改 div 的颜色，即使我停止并重新启动 gulp 任务，颜色也不会更新。所以我的问题是，如何更改我的 gulp 任务以监视我正在使用的新文件结构中的更改，以及如何在监视任务识别到文件更改后触发重新加载任务？我认为重新加载任务有效，在此 gulp 文件 gulp.watch 的先前工作版本正在工作，因此这似乎不是问题。我尝试根据 this 的回答将 gulp.watch 更改为 browserSync.watch，但这并没有解决问题。

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

明确地说，我正在使用 Jade、Bourbon Neat、SCSS、Gulp 和 Browsersync 制作静态网页。

如果对您有帮助，请在此处 a link 获取此项目的完整 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']);

Answer 1

我已经提取了你的回购并做了一些修复，将推送到 "fixes" 分支下。几件事：

您的 index.html 引用的是未缩小的 css，而您只导出缩小的。
监视列表需要子文件夹前缀，所以 gulp.watch('src/js/**/*.js', ['js']); 而不是 gulp.watch('src/**/*.js', ['js']);
您的 browserSync.init 引用了错误的目录（src 而不是 dist）。

Answer 2

对我有用的是将 gulp.watch 切换为 browserSync.watch。 BrowserSync 的文档表明此功能至少需要 2.6.0 版本。因此，如果您不使用 BrowserSync 版本，则可能需要更新该版本。

Gulp Browsersync 任务不会重新加载新文件结构的文件更改

Gulp Browsersync task not reloading on file changes with new file structure

javascript

sass

gulp

browser-sync

neat