Compiler sass sass dans la tâche de servir

Question

Je fais ces tâches de gulp: sass, servir, regarder, mais j'essaie de courir gulp sass lorsque la gorgée de regarder dans le service de gulp est activer mais ce n'est pas de travail.

J'ai besoin quand je fais un changement dans le fichier sass, ce compiler et montrer en temps réel dans le navigateur.

Une aide?

var gulp = require('gulp'), 
    browserSync = require('browser-sync'), 
    postcss = require('gulp-postcss'), 
    autoprefixer = require('autoprefixer'), 
    sass = require('gulp-sass'); 

gulp.task('serve', function() { 
    browserSync.init({ 
    notify: false, 
    port: 3005, 
    server: { 
     baseDir: ["app"], 
     routes: { 
     '/bower_components': 'bower_components' 
     } 
    } 
    }) 

    gulp.watch(['app/**/*.*']).on('change', browserSync.reload); 
}); 

gulp.task('sass', function() { 

    var processors = [ 
    autoprefixer({ browsers: ['last 2 versions']}) 
    ]; 

    return gulp.src('./app/sass/*.scss') 
    .pipe(sass().on('error',sass.logError)) 
    .pipe(postcss(processors)) 
    .pipe(gulp.dest('./app/css')); 
}); 

gulp.task('watch', ['sass'], function() { 
    gulp.watch('./app/sass/*.scss', ['sass']); 
}); 

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

Answer 1

Ajout .pipe(browserSync.reload({stream: true})) à votre tuyau de tâche SASS doit faire browsersync recharger seulement le css compilé.

Voici un exemple de votre tâche engouffreur

gulp.task('sass', function() { 
    var processors = [ 
     autoprefixer({ browsers: ['last 2 versions']}) 
    ]; 

    return gulp.src('./app/sass/*.scss') 
     .pipe(sass().on('error',sass.logError)) 
     .pipe(postcss(processors)) 
     .pipe(gulp.dest('./app/css')) 
     .pipe(browserSync.reload({stream: true})); 
});