Sass编译和浏览器同步

Question

I have this code for sass compiling:

gulp.task('scss', function () {
  return gulp.src('./src/scss/**/*.scss')
    .pipe(scss().on('error', scss.logError))
    .pipe(autoprefixer({
        flexbox: true,
        grid: true,
        browsers: ['> 1%', 'last 5 years', 'Firefox > 20']
    }))
    .pipe(gulp.dest('./src/styles'))
    .pipe(browserSync.stream());
});

and this task for watching changes:

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

    watch('./src/**/*html', function() {
        browserSync.reload();
    });

    watch('./src/scss/**/*.scss', function() {
        gulp.start('scss');
    })

});

SCSS compiles perfectly, but no streaming and changes on the webpage. HTML file watching working 100% nice (reload is working correctly), also no errors in console. What I need to fix to make streaming work properly?

Thank you in advance!

PS

• solution from the docs I've tried too - with the same result
• Tried localhost and Apache server - in both variants the same result

Answer 1

 gulp.task('scss', function () { return gulp.src('./src/scss/**/*.scss') .pipe(scss().on('error', scss.logError)) .pipe(autoprefixer({ flexbox: true, grid: true, browsers: ['> 1%', 'last 5 years', 'Firefox > 20'] })) .pipe(gulp.dest('./src/styles')) .pipe(browserSync.reload({stream: true})); }); 

this should work

EDIT: here is my usual setup

var browserSync = require('browser-sync').create(),
    reload = browserSync.reload;
/* SCSS / CSS */
var sass = require('gulp-sass'),
  sourcemaps = require('gulp-sourcemaps'),
  autoprefixer = require('gulp-autoprefixer');
/* VARIABLES */
var autoprefixer_config = {
    browsers: [
        'Android 2.3',
        'Android >= 4',
        'Chrome >= 20',
        'Firefox >= 24', // Firefox 24 is the latest ESR
        'Explorer >= 8',
        'iOS >= 6',
        'Opera >= 12',
        'Safari >= 6'
    ],
    cascade: false
};


/* SCSS Task*/
gulp.task('scss', function () {
    return gulp.src(paths.source.scss)
        .pipe(sourcemaps.init())
        .pipe(sass({
            includePaths: ['./node_modules', './bower_components'],
            outputStyle: 'compressed'
        }).on('error', sass.logError))
        .pipe(autoprefixer(autoprefixer_config))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest(paths.dest.css))
        .pipe(reload({stream: true}));
});

/* START SERVER */
/* this part is reduced because i'm using brwosersync to proxy my local symfony server */
gulp.task('startServer', [ 'scss'], function () {


    browserSync.init();

    gulp.watch(paths.source.scss, ['scss']);


});

this setup should give you a server on localhost:3000