Question

我在Chrome开发工具中编写了大部分CSS，因此浏览器会监视文件的更改并进行适当的刷新。我最近从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']);
});

使用Gulp-Sass时，Chrome Dev工具无法刷新

1 个答案: