BrowserSync.stream（）不工作，browserSync.reload（）拋出錯誤

這是我咕嘟咕嘟文件：BrowserSync.stream（）不工作，browserSync.reload（）拋出錯誤

var gulp = require('gulp'), 
    watch = require('gulp-watch'), 
    postcss = require('gulp-postcss'), 
    autoprefixer = require('autoprefixer'), 
    simplevars = require('postcss-simple-vars'), 
    nested = require('postcss-nested'), 
    cssImport = require('postcss-import'), 
    browserSync = require('browser-sync').create(); 

gulp.task('default', function() { 
    console.log("Test to see if gulp is running"); 
}); 

gulp.task('html', function() { 
    console.log("Something happening to my html"); 
}); 

gulp.task('styles', function() { 
    return gulp.src('./app/assets/styles/styles.css') 
    .pipe(postcss([cssImport, simplevars, nested, autoprefixer])) 
    .pipe(gulp.dest('./app/temp/styles')); 
}); 

gulp.task('cssInject', ['styles'], function() { 
    return gulp.src('.app/temp/styles/styles.css') 
    .pipe(browserSync.stream()); 
}); 

gulp.task('watch', function() { 
    browserSync.init({ 
    notify:false, 
    server: { 
     baseDir: "app" 
    } 
    }); 

    watch('./app/index.html', function() { 
    browserSync.reload(); 
    }); 

    watch('./app/assets/styles/**/*.css', function() { 
    gulp.start('cssInject'); 
    }); 
});

當我運行gulp watch任務，index.html文件重新加載預期。但cssInject task不會重新加載頁面，也不會注入css更改。它什麼也沒做。如果我改變.pipe(browserSync.stream());到.pipe(browserSync.reload());，它重新加載+更新的變化，但我得到這個錯誤：

[BS] Reloading Browsers... 
[11:15:36] 'cssInject' errored after 22 ms 
[11:15:36] TypeError: Cannot read property 'on' of undefined 
    at DestroyableTransform.Readable.pipe (C:\Users\z\OneDrive\NewWebsite\node_modules\vinyl-fs\node_modules\readable-stream\lib\_stream_readable.js:516:7) 
    at Gulp.<anonymous> (C:\Users\z\OneDrive\NewWebsite\gulpfile.js:34:4) 
    at module.exports (C:\Users\z\OneDrive\NewWebsite\node_modules\orchestrator\lib\runTask.js:34:7) 
    at Gulp.Orchestrator._runTask (C:\Users\z\OneDrive\NewWebsite\node_modules\orchestrator\index.js:273:3) 
    at Gulp.Orchestrator._runStep (C:\Users\z\OneDrive\NewWebsite\node_modules\orchestrator\index.js:214:10) 
    at C:\Users\z\OneDrive\NewWebsite\node_modules\orchestrator\index.js:279:18 
    at finish (C:\Users\z\OneDrive\NewWebsite\node_modules\orchestrator\lib\runTask.js:21:8) 
    at C:\Users\z\OneDrive\NewWebsite\node_modules\orchestrator\lib\runTask.js:52:4 
    at f (C:\Users\z\OneDrive\NewWebsite\node_modules\once\once.js:17:25) 
    at DestroyableTransform.onend (C:\Users\z\OneDrive\NewWebsite\node_modules\end-of-stream\index.js:31:18) 
    at emitNone (events.js:72:20) 
    at DestroyableTransform.emit (events.js:166:7) 
    at C:\Users\z\OneDrive\NewWebsite\node_modules\vinyl-fs\node_modules\readable-stream\lib\_stream_readable.js:965:16 
    at nextTickCallbackWith0Args (node.js:420:9) 
    at process._tickCallback (node.js:349:13)

任何人都可以提出什麼，我做錯了什麼？謝謝。

編輯添加：我有版本2.12.8的瀏覽器同步。

來源

2016-11-09 Newbie

通行證{ stream: true }到.reload()：

return gulp.src('.app/temp/styles/styles.css') 
    .pipe(browserSync.reload({ stream: true }));

，並更改

來源

2016-11-09 11:51:30 Nhan

有一些很好的gulp和browserSync食譜嘗試過，但它仍然沒有重新加載頁面。我手動重新加載頁面時會反映這些更改，但不會自動觸發。 – Newbie

@newbie也許改變這個？ 'watch（'./ app/assets/styles/**/*。css'，'cssInject'）;' – Nhan

我想我修復了它。我用browserSync.reload（）和cssInject作爲依賴創建了另一個gulp任務（bs-reload）。然後，我使用gulp啓動bs-reload而不是cssInject進行gulp watch任務。它重新加載頁面。我不知道爲什麼，也不知道如何讓瀏覽器同步流工作，但現在必須做。 – Newbie

我看到一對夫婦的問題 - 在我的評論，你使用gulp.start指出。嘗試

gulp.watch('./app/assets/styles/**/*.css', ['styles']); 

gulp.task('styles', function() { 
    return gulp.src('./app/assets/styles/styles.css') 
    .pipe(postcss([cssImport, simplevars, nested, autoprefixer])) 
    .pipe(gulp.dest('./app/temp/styles')) 
    .pipe(browserSync.reload({ stream:true })); 
});

我結合你的「cssInject」任務和「風格」的任務，因爲你可以做你一個任務更容易想要的東西。 browserSync.reload調用將嘗試注入已更改的文件（如果可以）而不是重新加載頁面。在official gulp recipes for css injection.

來源

2016-11-10 05:19:48 Mark

BrowserSync.stream（）不工作，browserSync.reload（）拋出錯誤

回答

相關問題