Gulp-Sass 无法刷新 Chrome 开发工具答案

【问题标题】：Chrome Dev tools not refreshing with Gulp-SassGulp-Sass 无法刷新 Chrome 开发工具
【发布时间】：2016-01-11 17:46:44
【问题描述】：

我的大部分 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']);
});

【问题讨论】：

请将 Browsersync 视为与 Gulp 操作一起使用的可行选项
我已经尝试过 Browsersync，但无法让它的代理与我的服务器设置一起工作。
根据我的阅读，您最关心的是 Chrome 开发工具，并不是您的更改不再加载到浏览器上。或者是你的新设置坏了，你能澄清一下吗？
不，我认为我的设置没有损坏。一切都能正确编译，源图在正确的位置。 Chrome 只是不会在 CSS 更改时刷新。如果有帮助，我会添加我的 gulpfile。

标签： css google-chrome sass gulp

【解决方案1】：

我建议Browsersync

这是一个示例代码，可以帮助您解决代理问题

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

   gulp.watch('./static/sass/**/*.scss', ['sass-all']);
});

【讨论】：