Question

我想要一个重新加载浏览器的监视任务。下面的手表适用于sass编译，但浏览器没有重新加载 - 想法？

// 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

我建议配置类似于：

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

来源：https://www.browsersync.io/docs/gulp

您需要初始化服务器并观察对SASS和HTML的更改。然后在你的sass编译任务中，你需要在dest命令之后添加.pipe(browserSync.stream());，这样browserSync就可以获取你新编译的SASS并提供它。最后，您需要使用默认任务调用您的服务任务。

另外，您可以在此处查看https://scotch.io/tutorials/how-to-use-browsersync-for-faster-development#using-browsersync-and-sass以获取Browsersync + Gulp + SASS的另一个示例。

Gulp浏览器重新加载不起作用 - 在SASS上使用手表

1 个答案: