2015-09-05 92 views
0

在问我之前,我试图找到ontocktock上类似的主题,但它没有多大帮助。所以,这是我的主题。我正在使用浏览器同步+ gulp,并且在重新加载和观看时遇到问题。我有gulpfile,当我运行gulp时,它应该监视并重新加载发生但没有发生的所有更改。它编译,但停止观看更远,并给我通知。我不得不重新加载我的网页在浏览器中手动究竟是不是很方便,这里是我的代码:浏览器同步+在grome重新加载铬

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 

任何知道我做错了吗?

回答

0

我知道这部分是错在你的“服务”的任务:

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

应该把源数组中观看“多个文件”

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

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

+0

感谢本杰明,需要尝试。 – Bogdan

0

该问题不在poststylus中,而是在丢失的插件中,其100%。您现在在项目中使用的丢失版本使用了postcss的不推荐使用的方法。 尝试从包中删除,然后将其添加(或简单地更新): 须藤NPM卸载--save-dev的丢失 须藤NPM安装--save-dev的丢失

它为我 - 通知弃用的removeSelf消失。

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

+0

谢谢,因为我的终端dosn't阅读命令'sudo'(不知道为什么),我试图没有它重新安装它。 – Bogdan