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']);

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

1 个答案: