Chrome开发工具不刷新与Gulp-Sass

Question

我在Chrome开发工具中编写了大部分CSS，以便浏览器将监视文件的更改并将适当刷新。我最近从指南针切换到Gulp-Sass编译我的SCSS，但Chrome不再刷新更改。如果我把Gulpfile中的Gulp-Sass换成Gulp-Ruby-Sass, Chrome会刷新。

我真的很想坚持使用Gulp-Sass/libsass，因为它编译速度快得多，我不想依赖Ruby，但我不知道我需要做些什么才能使Gulp-Sass适合我的工作流程。

如有任何建议，不胜感激。提前谢谢。

我的gulpfile:

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var minify = require('gulp-minify-css');
var rename = require('gulp-rename');
var sassdoc = require('sassdoc');
var sass_options = {
    errLogToConsole: true,
    outputStyle: 'compressed'
};
gulp.task('sass-app', function(){
    return gulp.src('./static/sass/styles.scss')
               .pipe(sourcemaps.init())
               .pipe(sass(sass_options).on('error', sass.logError))
               .pipe(sourcemaps.write('.'))
               // .pipe(rename('styles.css'))
               .pipe(gulp.dest('./static/css'));
});
gulp.task('sass-all', function() {
    return gulp.src('./static/sass/**/*.scss')
               .pipe(sourcemaps.init())
               .pipe(sass(sass_options).on('error', sass.logError))
               .pipe(sourcemaps.write('.'))
               .pipe(gulp.dest('./static/css'));
});
gulp.task('watch', ['sass-app'], function(){
    gulp.watch('./static/sass/**/*.scss', ['sass-app']);
});
gulp.task('watch-all', ['sass-all'], function (){
    gulp.watch('./static/sass/**/*.scss', ['sass-all']);
});

Answer 1

我建议使用Browsersync

下面的示例代码可以帮助您解决代理

的问题

gulp.task('watch-all', ['sass-all'], function (){
   browserSync.init({
       proxy: "http://localhost/project_name" 
   });
   gulp.watch('./static/sass/**/*.scss', ['sass-all']);
});