Gulpブラウザのリロードが機能しない - SASSでウォッチを使用する

Question

ブラウザをリロードするウォッチタスクが必要です。以下の時計は盛り付けのコンパイルでうまく動作しますが、ブラウザはリロードしません - 考え？

// Static Server + watching scss/html files 
gulp.task('serve', ['sass'], function() { 

    browserSync.init({ 
     server: "./app" 
    }); 

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

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

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

出典：：あなたがサーバーを初期化し、あなたのSASSとHTMLへの変更を監視する必要がありhttps://www.browsersync.io/docs/gulp

// Gulp Packages 
var gulp = require('gulp'), 
    gutil = require('gulp-util'), 
    sass = require('gulp-sass'), 
    sourcemaps = require('gulp-sourcemaps'), 
    browserSync = require('browser-sync').create(), 
    reload = browserSync.reload; 

// Default Task 
gulp.task('default', ['copyFiles','styles']); 

// Copy Files 
gulp.task('copyFiles', function() { 
    gulp.src('./source/*.php').pipe(gulp.dest('./public')); 
}); 

// Compile SASS 
var sassOptions = { 
    errLogToConsole: true, 
    outputStyle: 'compressed' 
}; 
gulp.task('styles', function() { 
    gulp.src('./scss/**/*.scss') 
     .pipe(sourcemaps.init()) 
     .pipe(sass(sassOptions).on('error', sass.logError)) 
     .pipe(sourcemaps.write('.')) 
     .pipe(gulp.dest('./css/')); 
}); 

// Watch Task 
gulp.task('watch', function() { 
    gulp.watch('./scss/includes/**/*.scss', ['styles']); 
    gulp.watch('./scss/includes/**/*.scss').on('change', browserSync.reload); 
}); 

Answer 1

は、私は同様の構成をお勧めします。次に、あなたのsassコンパイルタスクでは、destコマンドの後に.pipe(browserSync.stream());を追加する必要があります。そのため、browserSyncは新しくコンパイルされたSASSを取り出して提供できます。 最後に、デフォルトのタスクでサーブタスクを呼び出す必要があります。

また、Browsersync + Gulp + SASSの別の例についてはhttps://scotch.io/tutorials/how-to-use-browsersync-for-faster-development#using-browsersync-and-sassをご覧ください。