使用Gulp，觸控筆和瀏覽器同步進行本地預處理

Question

我試圖在Windows上爲客戶端設置CSS預處理和瀏覽器同步。 Prepros似乎是垃圾，他不能使用codeKit，因爲它只是Mac。

我給他這些資源：https://webdesign.tutsplus.com/tutorials/supercharge-your-local-wordpress-development--cms-28303和https://browsersync.io/docs/gulp

預處理的偉大工程，但是瀏覽器必須手動刷新看到CSS變化。

你能發現這段代碼中有什麼不正確的地方嗎？ MAMP也參與其中......所以它可能是別的。我正在嘗試不同的配置來解決問題。

// gulpfile.js 
var gulp = require('gulp'); 
var browserSync = require('browser-sync'); 
var stylus = require('gulp-stylus'); 

gulp.task('setup-server', function() { 
    var files = [ 
    './style.css', 
    './*.php', 
    ]; 
    browserSync.init(files, { 
    proxy: 'https://website-name.dev', 
    }); 
}); 

gulp.task('compile-stylus', function() { 
    return gulp.src('stylus/*.styl') 
    .pipe(stylus({ 
     // options 
    })) 
    .pipe(gulp.dest('./')) // root of theme 
    .pipe(browserSync.stream()) 
    ; 
}); 

gulp.task('default', ['setup-server', 'compile-stylus'], function() { 
    gulp.watch('stylus/**/*.styl', ['compile-stylus']); 
}); 

文件結構

 
project-root 
    gulpfile.js 
    /stylus 
    /partials 
    style.styl 

Answer 1

嘗試這些變化：

var browserSync = require("browser-sync").create(); 
var reload = browserSync.reload; 

，並在任務結束時，以下變化：

gulp.task('compile-stylus', function() { 
    return gulp.src('stylus/*.styl') 
    .pipe(stylus({ 
     // options 
    })) 
    .pipe(gulp.dest('./')) // root of theme 
    .pipe(browserSync.reload({stream: true})); 
}); 

我假設你的文件夾結構中含有gulpfile.js而不是gruntfile.js。