Gulp、Stylus、Browser-syncを使用したローカル前処理

Question

Windows上のクライアントのCSS前処理とブラウザ同期を設定しようとしています。 Preprosはジャンクだと思われ、MacのみなのでcodeKitは使用できません。

私は彼に、これらのリソースを与えた：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ではないと仮定します。