Chrome Dev工具不使用Gulp-Sass刷新

Question

我的大多数CSS都是用Chrome开发工具编写的，这样浏览器就会监视文件的变化，并相应地刷新。我最近从Compass切换到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']);
});