Question

在我保存对浏览器同步窗口重新加载的*.scss文件的更改后，我试图这样做。

当我保存*.html文件时，它目前工作正常，但我不知道如何让它适用于SASS文件。

这是我的gulp文件。

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var browserSync = require('browser-sync').create();

// config
var config = {
    sassInput: 'sass/',
    sassOutput: 'src/css/',
    publicRoot: 'src/',
}

// Compile Our Sass
gulp.task('sass', function() {
    return gulp.src(config.sassInput + '*.scss')
        .pipe(sass())
        .pipe(gulp.dest(config.sassOutput))
        .pipe(browserSync.reload);
});

// vendor prefixes
gulp.task('prefix', function () {
    return gulp.src(config.sassOutput)
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(gulp.dest(config.publicRoot));
});

// Static server
gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: config.publicRoot
        }
    });
});

// Watch Files For Changes
gulp.task('watch', function() {
    gulp.watch(config.sassInput + '*.scss', ['sass'], browserSync.reload);
    gulp.watch(config.publicRoot + '*.html', browserSync.reload);
});

// Default Task
gulp.task('default', ['sass', 'prefix', 'browser-sync', 'watch']);

Answer 1

问题是我需要调用stream（）。

这是工作职能：

gulp.task('sass', function () {
    return gulp.src(config.sassInput + '*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest(config.sassOutput))
        .pipe(browserSync.stream());
});

SASS编译后浏览器同步不重新加载

1 个答案: