使用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。