Gulp browser-sync not reloading

Question

Это мой файл gulpfile.js. Он не перезагружается, когда я меняю и сохраняю свой css или html, но он показывает сообщение «Connected to Browser-sync», когда я использую 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

Попробуйте это. Все, что я сделал, это добавить новую зависимость .. run-sequence, чтобы упростить организацию работы. Все, что вам нужно, - запустить gulp, чтобы запустить скрипт, и все должно работать отлично.

Кроме того, я создал папку site в корне моего проекта. просто потому, что кажется более организованным таким образом, и если вы когда-либо думаете об использовании нефрита, или sass, scss и т. д. в вашем проекте, и все, что вам нужно сделать, это изменить src path и сохранить отображаемый вывод в папке site. Кроме того, все то же самое.

EDIT Я забыл упомянуть, что я также добавил 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']);