Question

我有这个代码用于sass编译：

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());
});

这个观察变化的任务：

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

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

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

});

SCSS完美编译，但网页上没有流媒体和更改。 HTML文件看起来工作100％好（重新加载工作正常），在控制台也没有错误。我需要修复什么才能使流式传输正常工作？

提前谢谢！

P.S

solution来自我尝过的文档 - 结果相同
尝试使用localhost和Apache服务器 - 两种变体都有相同的结果

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}));
});

这应该有效

编辑：这是我常用的设置

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


});

此设置应该在localhost：3000

上为您提供服务器

Sass编译和浏览器同步

1 个答案: