吞咽浏览器同步不重新加载

Question

这是我的gulpfile.js文件。当我更改并保存我的css或html时它不会重新加载，但是当我使用gulp serve时它会显示“已连接到浏览器同步”消息。我似乎无法弄清楚出了什么问题。

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var gulp = require('gulp');



gulp.task('styles', function() {
    gulp.src('./css/*.css')
        .pipe(gulp.dest('./css'))
});

//Watch task
gulp.task('default',function() {
    gulp.watch('./css/*.css',['styles']);
}); 

gulp.task('js', function () {
    return gulp.src('./js/*.js')
        // .pipe(concat('all.js'))
        .pipe(gulp.dest('./js'));
});

gulp.task('html', function () {
    return gulp.src('./*.html')
        .pipe(gulp.dest('./'));
});

gulp.task('js-watch', ['js'], browserSync.reload);

gulp.task('html-watch', ['html'], browserSync.reload);

gulp.task('css-watch', ['css'], browserSync.reload);

gulp.task('serve', ['js', 'html', 'styles'], function () {

    browserSync.init({
        server: {
            baseDir: "./"
        }
    });

    gulp.watch("./*.js", ['js-watch']);
    gulp.watch("./*.html", ['html-watch']);
    gulp.watch("./css/*.css", ['css-watch']);
});

Answer 1

试试这个。 我所做的只是添加一个新的依赖项.. gulp，以便于组织事物的运行方式。您只需要运行site来启动脚本，一切都应该完美运行。

除此之外，我在项目的根目录下创建了一个src path文件夹。只是因为它看起来更像这样组织，如果你想到在你的项目中使用jade，sass，scss等，你所要做的就是改变site并保持渲染的输出在{ {1}}文件夹.. 除此之外，一切都是一样的。

修改 我忘了提到我还在每个任务的末尾添加了pipe(bs.stream());行，例如HTML，样式和JS，以便每次进行更改时浏览器都会重新加载。

如果您不想制作server文件夹以保持项目的有序性，您所要做的就是删除site/路径。并且server: 'site'只需用./替换网站即可。端口您可以删除它或定义自己的端口

var gulp = require('gulp'),
  bs = require('browser-sync').create(),
  sequence = require('run-sequence');

gulp.task('styles', function() {
  gulp.src('site/css/*.css')
    .pipe(gulp.dest('site/css'))
    .pipe(bs.stream());
});

gulp.task('js', function() {
  gulp.src(['site/js/*.js'])
    // .pipe(concat('all.js'))
    .pipe(gulp.dest('site/js'))
    .pipe(bs.stream());
});

gulp.task('html', function() {
  gulp.src('site/*.html')
    .pipe(gulp.dest('site'))
    .pipe(bs.stream());
});

gulp.task('browser-sync', function() {
  bs.init({
    server: 'site',
    port: 3010
  });
});

gulp.task('watch', ['build'], function() {
  gulp.watch(['site/css/*.css'], ['styles']);
  gulp.watch(['site/js/*.js'], ['js']);
  gulp.watch(['site/*.html'], ['html']);
});

gulp.task('build', function(done) {
  sequence(
    ['html', 'js', 'styles'],
    'browser-sync',
    done);
});


gulp.task('default', ['watch']);