Comment faire fonctionner browserSync avec gulp?

Question

Je suis les docs ici: http://www.browsersync.io/docs/gulp/

C'est ce que je l'ai construit jusqu'à présent:

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

Quand je lance 'grunt' à partir du terminal, la tâche de 'SASS' fonctionne. Mais je n'ai aucune indication que browserSync s'exécute. Le terminal ne me donne aucun retour sur tout ce qui est pertinent pour browserSync. Si je navigue vers 'localhost: 3000' ou 'localhost: 3001', rien ne fonctionne.

Answer 1

Vous créez une tâche dans une tâche, c'est pourquoi vous n'avez rien vu de browserSync, et vous n'avez pas besoin d'appeler BrowserSync.create() et pas besoin d'utiliser gulp.watch, browserSync regardera automatiquement les fichiers que vous avez spécifiés dans son config.

Correction:

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