Chrome Dev工具無法使用Gulp-Sass令人耳目一新

我在Chrome開發工具中編寫了大部分CSS，因此瀏覽器會監視文件的更改並進行適當的刷新。我最近從Compass轉換到Gulp-Sass編譯我的SCSS，但Chrome不再刷新變化。如果我在Gulpfile中將Gulp-Sass換成Gulp-Ruby-Sass，則Chrome會刷新。Chrome Dev工具無法使用Gulp-Sass令人耳目一新

我真的想堅持使用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']); 
});

來源

2015-10-13 Tim Snyder

請Browsersync看作是一個可行的選項與您的Gulp操作一起使用 – AGE

我試過Browsersync，但一直未能讓它的代理與我的服務器設置一起工作。 –

從我讀到的內容來看，您最關心的是Chrome開發工具，並不是您的更改不再在瀏覽器中加載。或者也許這是事實，你的新設置被打破了，你能澄清嗎？ – AGE

我建議Browsersync

下面是一個示例代碼，可以幫助您的問題與代理

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

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

來源

2015-10-14 01:50:15

Chrome Dev工具無法使用Gulp-Sass令人耳目一新

回答

相關問題