Gulp 浏览器同步未重新加载答案

【问题标题】：Gulp browser-sync not reloadingGulp 浏览器同步未重新加载
【发布时间】：2016-03-26 04:50:40
【问题描述】：

这是我的 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']);
});

【问题讨论】：

如果已回答，请不要忘记将此问题设置为已回答。

标签： html gulp browser-sync

【解决方案1】：

试试这个。我所做的只是添加一个新的依赖项..run-sequence，以便轻松组织事物的运行方式。你只需要运行gulp 来启动脚本，一切都会完美运行。

除此之外，我还在项目的根目录下创建了一个site 文件夹。只是因为这样看起来更有条理，如果你曾经想过在你的项目中使用jade、sass、scss等，你所要做的就是更改src path并将渲染输出保留在site文件夹.. 除此之外，一切都一样。

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

如果您不想创建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']);

【讨论】：