Gulp 浏览器同步只工作一次

我正在我的一个项目中尝试Gulp，我想像以前使用Grunt watch一样运行它。这意味着，一旦完成所有操作，它必须监视更少的文件和js文件，lint，合并，编译和刷新浏览器。

我设法让它与 gulp 浏览器同步一起使用，但由于某种原因它只能工作一次。我对我的 .less 文件进行了更改，浏览器重新加载。然后，第二次更改，它确实编译但不发生重新加载。

这是日志：

[BS] Serving files from: ./
[09:47:26] Starting 'css-clean'...
[09:47:26] Finished 'css-clean' after 16 ms
[09:47:26] Starting 'styles'...
[BS] 1 file changed (styles.min.css)
[09:47:27] Finished 'styles' after 624 ms
[09:47:27] Starting 'styles-watch'...
[BS] Reloading Browsers...

当我第二次点击保存时：

[09:47:31] Starting 'css-clean'...
[09:47:31] Finished 'css-clean' after 3.39 ms
[09:47:31] Starting 'styles'...
[BS] 1 file changed (styles.min.css)
[09:47:32] Finished 'styles' after 362 ms

至于JS，它一直在工作。没有任何问题，即使在样式任务完成后，JS更改仍然会正确触发重新加载。真的只是风格有问题。

这是gulpfile.js

var gulp = require('gulp'),
    autoprefixer = require('gulp-autoprefixer'),
    less = require('gulp-less'),
    minifycss = require('gulp-minify-css'),
    concat = require('gulp-concat'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    notify = require('gulp-notify'),
    path = require('path'),
    streamqueue = require('streamqueue'),
    clean = require('gulp-clean'),
    browserSync = require('browser-sync').create(),
    reload = browserSync.reload;

// Clean the CSS folder
gulp.task('css-clean', function () {
    return gulp.src(['dist/css'], {read: false})
        .pipe(clean());
});
// Clean the CSS folder
gulp.task('js-clean', function () {
    return gulp.src(['dist/js'], {read: false})
        .pipe(clean());
});

// Generate the CSS styles, clean before hand
gulp.task('styles', ['css-clean'], function() {
  return streamqueue({ objectMode: true },
            gulp.src(['./bower_components/uikit/less/uikit.less']),
            gulp.src(['./src/less/main.less'])
        )
    .pipe(concat('styles.less'))
    .pipe(less({
      paths: [ path.join(__dirname, 'less', 'includes') ]
    }))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('dist/css'))
    .pipe(rename({suffix: '.min'}))
    .pipe(minifycss())
    .pipe(gulp.dest('dist/css'))
    .pipe(browserSync.reload({stream:true}));
});
// create a task that ensures the `styles` task is complete before
// reloading browsers
gulp.task('styles-watch', ['styles'], browserSync.reload);

// Lint Task
gulp.task('lint', function() {
    return gulp.src('src/js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

// Generate the scripts, clean before hand
gulp.task('scripts', ['js-clean', 'lint'], function() {
  return streamqueue({ objectMode: true },
            gulp.src(['./bower_components/jquery/dist/jquery.js']),
            gulp.src(['./bower_components/modernizer/modernizr.js']),
            gulp.src(['./bower_components/uikit/js/uikit.js']),
            gulp.src(['./src/js/plugin.js']),
            gulp.src(['./src/js/main.js'])
        )
    .pipe(concat('scripts.js'))
    .pipe(gulp.dest('dist/js'))
    .pipe(rename({suffix: '.min'}))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'))
    .pipe(browserSync.reload({stream:true}));
});
// create a task that ensures the `scripts` task is complete before
// reloading browsers
gulp.task('scripts-watch', ['scripts'], browserSync.reload);

// Lint Task
gulp.task('alldone', ['scripts'], function() {
    return gulp.src('src/js/*.js')
               .pipe(notify({ message: 'Gulp tasks are completed!!' }));
});

// Static server
gulp.task('browsersync', function() {
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });
    gulp.watch("src/less/*.less", ['styles-watch']);
    gulp.watch('src/js/*.js', ['lint', 'scripts-watch']);
    gulp.watch("*.html").on('change', reload);
});

// Default Task
gulp.task('default', ['css-clean', 'js-clean', 'styles', 'lint', 'scripts', 'alldone']);
// Build Task
gulp.task('build',   ['css-clean', 'js-clean', 'styles', 'lint', 'scripts', 'alldone']);

感谢您的帮助！

对我来说，在 Gulp 4 中，匿名函数并没有解决问题，我所做的是将 browserSync.reload（）包装在一个带有 done 回调的函数中：

function reload(done) {
  browserSync.reload();
  done();
}
gulp.watch(['scripts/**/*.js','!scripts/main.min.js'], gulp.series(buildScripts, reload));

直接使用

.pipe(browserSync.stream())

我在更改".jade"文件时曾经遇到过同样的问题，它只重新加载了一次。然后我把browserSync.reload包装在一个匿名函数中，比如

gulp.task('templates-watch', ['templates'], function() {
    browserSync.reload();
});

它对我有用。我不知道browserSync.reload是否有特别之处。试一试怎么样。:)

我知道

这不是正确的做事方法，但经过一些试验和错误，我发现在browserSync.reload()之后使用未定义的函数

gulp.watch("./**/*.php", function () {
    browserSync.reload();
    done();
});

导致我的日志中出现引用错误，该错误触发重新加载浏览器：

ReferenceError: done is not defined 
    at ...
    at ...
    at asyncRunner (...)
    at processTicksAndRejections (...)
[Browsersync] Reloading Browsers...

你确定CSS在浏览器中没有改变吗？无需重新加载页面即可加载新样式。至少这是我的 gulp 设置正在做的事情。

尝试更改 .less 文件，并查看更改是否在浏览器中实际可见。

我的情况有点不同，但它可能足够相似，对您或其他人有所帮助。我有 gulp + 浏览器同步设置如下：

.task('serve', ['clean', 'lint', 'sass', 'js', 'server'], function () {
  return gulp.watch([paths.js, paths.html, paths.sass], 
    ['lint', 'sass', 'js', browserSync.reload]);
})

这将启动并打开页面一次。如果我对 HTML 页面进行更改并保存它，我可以看到 lint、sass、js 和 browserSync.reload 运行，但浏览器没有刷新。我的HTML非常简单;这：

<!doctype html>
<html>
TEST
</html>

我最终将 HTML 更改为此内容，它开始工作：

<!doctype html>
<html>
<head>
    <title>TEST</title>
</head>
<body>
HELLO-TEST
</body>
</html>

我遇到了同样的问题.看起来node_modules中的"asyncDone"函数存在问题。这是文件路径：/node_modules/glob-watcher/index.js

以下只是用于临时修复的肮脏黑客。您有时可能会遇到问题。但为我工作。

function onChange() {
  console.log("onChange running: ", running);
  /** existing code */
  // keeping this function at it worked for me.
  setTimeout(() => {
     runComplete({msg: "test"});
  }, 2000);
}

相关内容

最新更新

热门标签：