2015-09-05 53 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

相關問題