浏览器同步 + gulp 在 chrome 中重新加载

Question

在问这里之前，我试图在 overstockflow 上找到类似的主题，但没有多大帮助。所以，这是我的主题。我正在使用 browser-sync + gulp 并且在重新加载和观看时遇到问题。我有 gulpfile，当我运行 gulp 时，它应该监视并重新加载发生但没有发生的所有更改。它编译但停止观看并给我通知。我必须手动在浏览器中重新加载我的页面，这不方便，这是我的代码：

var gulp = require('gulp'),
    jade = require ('gulp-jade'),
    stylus = require ('gulp-stylus'),
    watch = require ('gulp-watch'),
    plumber =  require('gulp-plumber'),
    browserSync = require ('browser-sync').create(),
    poststylus = require ('poststylus'),
    lost = require ('lost');

// JADE
gulp.task('jade', function(){
    return gulp.src('app/jade/*.jade')
        .pipe(plumber())
        .pipe(jade({pretty:true}))
        .pipe(gulp.dest('build/'))
});

// STYLUS
gulp.task('stylus', function(){
    return gulp.src('app/stylus/*.styl')
        .pipe(plumber())
        .pipe(stylus({use:[poststylus(['lost'])]}))
        .pipe(gulp.dest('build/css'))
});

gulp.task('browser-watch', ['jade', 'stylus'], browserSync.reload);


gulp.task('serve', function(){

    browserSync({
        server: {
            baseDir: './'
        }
    });

    gulp.watch('app/jade/*.jade', 'app/stylus/*.styl', ['browser-watch']);
});


// DEFUALT
gulp.task('default', ['browser-watch', 'serve']);

这里是通知：

$ gulp
    [20:34:23] Using gulpfile c:\Users\Bogdan\Desktop\projects\lost\gulpfile.js
    [20:34:23] Starting 'jade'...
    [20:34:23] Starting 'stylus'...
    [20:34:23] Starting 'serve'...
    [20:34:23] 'serve' errored after 239 μs
    [20:34:23] TypeError: object is not a function
        at Gulp.<anonymous> (c:\Users\Bogdan\Desktop\projects\lost\gulpfile.js:31:2)
        at module.exports (c:\Users\Bogdan\Desktop\projects\lost\node_modules\gulp\node_modules\orchestrator\lib\runTask.js:34:7)
        at Gulp.Orchestrator._runTask (c:\Users\Bogdan\Desktop\projects\lost\node_modules\gulp\node_modules\orchestrator\index.js:273:3)
        at Gulp.Orchestrator._runStep (c:\Users\Bogdan\Desktop\projects\lost\node_modules\gulp\node_modules\orchestrator\index.js:214:10)
        at Gulp.Orchestrator.start (c:\Users\Bogdan\Desktop\projects\lost\node_modules\gulp\node_modules\orchestrator\index.js:134:8)
        at c:\Users\Bogdan\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:129:20
        at process._tickCallback (node.js:355:11)
        at Function.Module.runMain (module.js:503:11)
        at startup (node.js:129:16)
        at node.js:814:3
    Container#eachAtRule is deprecated. Use Container#walkAtRules instead.
    Container#eachDecl is deprecated. Use Container#walkDecls instead.
    Node#removeSelf is deprecated. Use Node#remove.
    [20:34:23] Finished 'jade' after 412 ms
    [20:34:23] Finished 'stylus' after 390 ms

知道我做错了什么吗？

Answer 1

试试这个：Deprecate container#remove and node#removeSelf. Fixes #191.

Answer 2

我知道这部分在您的“服务”任务中是错误的：

gulp.watch('app/jade/*.jade', 'app/stylus/*.styl', ['browser-watch']);

应该将源放在一个数组中以观看“多个文件”

gulp.watch(['app/jade/*.jade', 'app/stylus/*.styl'], ['browser-watch']);

另一方面，我不知道“poststylus”。看起来棒极了！祝你好运！

Answer 3

问题不在于 posttylus，而在于丢失的插件，它的 100%。您现在在项目中使用的 lost 版本使用了不推荐使用的 postcss 方法。 尝试从您的包中删除它，然后添加它（或简单地更新）： sudo npm uninstall --save-dev 丢失 sudo npm install --save-dev 丢失

它对我有用 - 已弃用 removeSelf 的通知消失了。

问题已于 2 天前解决：https://github.com/corysimmons/lost/pull/169