如何让 browserSync 与 gulp 一起运行？

Question

我在这里关注文档： http://www.browsersync.io/docs/gulp/

这是我到目前为止所构建的：

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



gulp.task('serve',  ['sass'],  function() {

    gulp.task('browser-sync', function() {
        browserSync.init({
            //proxy: "mydevserver",
        server : ".",
            files: ['./index.html', './css/**']
        });
    });

    gulp.watch("./css/**").on('change', browserSync.reload);

} ) ;

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
    return gulp.src("./sass/**")
        .pipe(sass())
        .pipe(gulp.dest("./css/"))
        .pipe(browserSync.stream());
});

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

当我从终端运行“grunt”时，“sass”任务有效。但我没有迹象表明 browserSync 运行。终端没有给我任何与 browserSync 相关的反馈。如果我导航到“localhost:3000”或“localhost:3001”，则没有任何运行。

Answer 1

你在一个任务中创建了一个任务，这就是为什么你没有看到任何关于browserSync的东西，你不需要调用BrowserSync.create()也不需要使用gulp.watch，browserSync会自动监视你拥有的文件在其配置中指定。

更正：

var browserSync = require('browser-sync');
gulp.task('serve',  ['sass'],  function() {
    browserSync({
        //proxy: "mydevserver",
    server : ".",
       files: ['./index.html', './css/**']
    });
} ) ;