Question

在问这里之前，我试图在积压流程上找到类似的主题，但它没有多大帮助。所以，这是我的主题。我使用 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

我知道你的'服务'任务中这部分是错误的：

class Book def self.default_opts=(opts) @default_opts = opts end def self.reset_default_opts @default_opts = {} end def self.default_opts @default_opts || reset_default_opts end def initialize(opts) @opts = self.class.default_opts.merge(opts) end end Book.instance_variables # => [:@default_opts]

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

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

另一方面，我不知道'poststylus'。这看起来很棒！祝你好运！

Answer 3

问题不在于poststylus，而是在丢失的插件中，它是100％。您在项目中使用的丢失版本使用了postcss的弃用方法。尝试从包中删除它，然后添加它（或只是更新）： sudo npm uninstall --save-dev丢失了 sudo npm install --save-dev lost

它对我有用 - 弃用的删除自动通知消失了。

问题在2天前得到解决：https://github.com/corysimmons/lost/pull/169

chrome-sync + gulp在chrome中重新加载

3 个答案: