這是我咕嘟咕嘟文件: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的瀏覽器同步。
有一些很好的gulp和browserSync食譜嘗試過,但它仍然沒有重新加載頁面。我手動重新加載頁面時會反映這些更改,但不會自動觸發。 – Newbie
@newbie也許改變這個? 'watch('./ app/assets/styles/**/*。css','cssInject');' – Nhan
我想我修復了它。我用browserSync.reload()和cssInject作爲依賴創建了另一個gulp任務(bs-reload)。然後,我使用gulp啓動bs-reload而不是cssInject進行gulp watch任務。它重新加載頁面。我不知道爲什麼,也不知道如何讓瀏覽器同步流工作,但現在必須做。 – Newbie