javascript - Gulp BrowserSync 不刷新

Question

Github 存储库链接:https://github.com/janschloss/boilerplate

我的问题是只有 scss 更改才能被 Gulp 中的 BrowserSync 识别(没有 html 或 js 或/img 更改)。我想那是因为 scss 更改是直接流式传输的。奇怪的是，我有一个版本可以识别 html 和 img 更改，但我再也找不到了。

有人看到错误了吗？

"use strict";

// Define packages

var gulp            = require('gulp'),
    sass            = require('gulp-sass'),
    clean           = require('gulp-clean'),
    sourcemaps      = require('gulp-sourcemaps'),
    autoprefixer    = require('gulp-autoprefixer'),
    plumber         = require('gulp-plumber'),
    imagemin        = require('gulp-imagemin'),
    uglify          = require('gulp-uglify'),
    concat          = require('gulp-concat'),
    strip           = require('gulp-strip-comments'),
    browserSync     = require('browser-sync');

// Define file paths

var scssSrc = 'src/scss/**/*.scss',
    jsSrc = 'src/js/*.js',
    htmlSrc = 'src/*.html',
    imgSrc = 'src/img/*';

// BrowserSync config

gulp.task('browserSyncInit', function() {
    browserSync.init({
        server: {
            baseDir: 'dist'
        }
    });
    gulp.watch('./dist/*').on('change', browserSync.reload);
});

// Concat scss files, compile compressed to css, prefix css, strip comments and create sourcemap

gulp.task('sass', function() {
    return gulp.src(scssSrc)
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(concat('main.min.scss'))
        .pipe(sass({outputStyle: 'compressed'}))
        .pipe(autoprefixer())
        .pipe(strip.text())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('dist/css'))
        .pipe(browserSync.reload({
            stream: true
        }));
});

// Concatenate, uglify, strip comments and create sourcemap for js files

gulp.task('js', function() {
    return gulp.src(jsSrc)
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(concat('main.min.js'))
        .pipe(uglify())
        .pipe(strip())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('dist/js'));
});

// Image optimization

gulp.task('img', function () {
    return gulp.src(imgSrc)
        .pipe(imagemin({
            progressive: true
        }))
        .pipe(gulp.dest('dist/img'));
});

// Clean task

gulp.task('clean', function() {
    return gulp.src('dist')
        .pipe(clean());
});

// Copy html

gulp.task('copy', function() {
    return gulp.src(htmlSrc)
        .pipe(gulp.dest('dist/'));
});

// Default Task

gulp.task('default', ['clean', 'copy', 'sass', 'js', 'img', 'browserSyncInit'], function () {   //todo asynchronous
  gulp.watch(scssSrc, ['sass']);
  gulp.watch(jsSrc, ['js']);
  gulp.watch(imgSrc, ['img']);
  gulp.watch(htmlSrc, ['copy']);
});

我觉得

gulp.watch('./dist/*').on('change', browserSync.reload);

是相关行。我的路径有什么问题吗？

我的相关文件夹结构如下:

gulpfile.js

src

dist

更改在 src 中进行，并在运行时使用 gulp 复制到 dist。

谢谢!

Answer 1

我无法解释。但是，当我从 browserSyncInit 任务中删除您的 watch 调用并将其与其他 watch 一起放入默认任务的回调中时，一切正常。

相关代码:

// BrowserSync config

gulp.task('browserSyncInit', function() {
    browserSync.init({
        server: {
            baseDir: 'dist'
        }
    });

});


// Default Task

gulp.task('default', ['clean', 'copy', 'sass', 'js', 'img', 'browserSyncInit'], function () {   //todo asynchronous
  gulp.watch(scssSrc, ['sass']);
  gulp.watch(jsSrc, ['js']);
  gulp.watch(imgSrc, ['img']);
  gulp.watch(htmlSrc, ['copy']);
    gulp.watch('./dist/**/*').on('change', function () {

        console.log("Watch hit");
        browserSync.reload();
    });
});

这对您的 gulp 文件来说是否理想？我有点理解最初在其他任务中触发 watch 的想法。

我注意到了非常奇怪的事情；有时 DIST watch 会走，而所有其他 watch 都不会。就好像发生了一种竞争情况，其中一些被注册而其他被覆盖。当它们像最初那样分开时，SRC watch 或 DIST watch 都可以工作。我可以在 DIST watch 工作时直接编辑 DIST 中的文件并触发重新加载。

使用您的 github 项目，在 CB 函数中将所有 watch 放在一起对我来说很有效。

我还注意到另一个不相关的问题。重新运行你的 gulp 文件需要我先 rm -rf dist 否则我会出错。