Articles of 浏览器同步

使用与node.js应用程序的浏览器同步

我有一个现有的节点应用程序。 我的节点目录结构是这样设置的: ./ node_modules/ src/ views/ index.html … server.js test/ gulpfile.js package.json 我可以成功地启动我的应用程序我的运行node ./src/server.js从上面显示的根。 一旦开始,我可以在浏览器中访问“ http:// localhost:3000 ”,看到index.html的内容,就像我期待的那样。 我想加快我的发展,我最近了解到浏览器同步 。 为了将其纳入我的g process过程,我有以下几点: var browserSync = require('browser-sync').create(); browserSync.init({ server: { baseDir: './src/', server: './src/server.js' } }); 当我运行gulp时,我在命令行看到以下内容: BS]访问URL: ————————————– Local: http://localhost:3000 External: http://[ip address]:3000 ————————————– UI: http://localhost:3001 UI External: http://[ip address]:3001 ————————————– 我的浏览器然后打开,它试图加载http:// localhost:3000 。 在这一点上,我在浏览器窗口中看到以下错误: […]

如何在浏览器同步中configuration端口

我有一个与browser-sync运行的gulp任务,默认情况下,它运行在node.js服务器的端口3000上。我想要将默认端口更改为任何其他端口,如3010。 var gulp = require('gulp'), connect = require('gulp-connect'), browserSync = require('browser-sync'); gulp.task('serve', [], function() { browserSync( { server: "../ProviderPortal" }); }); /*** 8. GULP TASKS **********/ gulp.task('default', ['serve']); 我在用: browser-sync version-2.6.1 我尝试configuration吞咽任务,如: gulp.task('serve', [], function() { browserSync( { ui: { port: 8080 }, server: "../ProviderPortal" }); }); 但它没有工作。

BrowserSync不断地使用Express / Gulp进行GET

我正在运行Express服务器,并使用browserSync监视更改。 当我运行npm start ,它开始运行一个吞咽任务: // Server task gulp.task('server', function(cb) { // We use this `called` variable to make sure // the callback is only executed once var called = false; return nodemon({ script: 'server.js', watch: ['server.js', 'app/**/*.js', 'config/**/*.js'] }) .on('start', function onStart() { if (!called) { cb(); } called = true; }) .on('restart', function onRestart() […]

如何通过BrowserSync中间件设置会话cookie?

我最近从Express Web应用程序移到了Nodejs的BrowserSync应用程序。 使用Express,如果我想设置一个cookie,我的configuration看起来是这样的: var express = require('express'); var session = require('express-session'); var finalhandler = require('finalhandler'); var serveStatic = require('serve-static'), serve = serveStatic(__dirname); var app = express(); app.use(session({ // see https://github.com/expressjs/session secret: 'keyboard cat', resave: false, saveUninitialized: false })) .use(function(req, res, next) { res.cookie('myCookie', 'my cookie value'); var done = finalhandler(req, res); serve(req, res, done); }); […]

浏览器同步服务器与Gulp非常缓慢的启动

[ 编辑:解决! ] 看到我的答案在下面。 [ 原创问题如下 <<] 我在本地项目中使用GulpJS的服务器模式(使用内置的静态服务器)BrowserSync,似乎一切正常,除了BrowserSync服务器启动速度非常慢。 当我运行Gulp时,BrowserSync本身似乎马上被初始化,但服务器启动并需要大约4到5分钟(偶尔更多)才能返回访问URL。 在此期间,一切都会继续运行,BrowserSync会响应reload()调用等,但通过常规URL(本例中为localhost:3000和localhost:3001)不能访问。 一旦访问URL被返回,服务器似乎已经启动,BrowserSync的页面刷新工作正常,实际上非常快。 我已经尝试了几个不同的configuration我的gulpfile.js,尝试不同的方式来初始化BrowserSync,不同的方法来调用stream()和reload()方法(包括尝试BrowserSync的基本Gulp / SASS“食谱”)和不同的端口号,但所有configuration都有同样的问题。 我什至尝试禁用我的防火墙和AV软件(Avast),但没有。 我正在运行Windows 8.1,如果这是相关的。 BrowserSync是通过NPM本地新安装到项目中的,本地新安装到其他目​​录也有同样的问题。 NPM,Ruby,Gulp和所有模块似乎都是最新的。 对于它的价值,我所有使用Ruby,Gulp和Node.js的经验都非常stream畅,没有任何问题。 我找不到任何其他的post提到这个问题,我开始认为这是正常的行为。 这是正常的,如果没有,有没有人有任何想法的事情要尝试? 由于BrowserSync服务器总是启动(最终),所以这个延迟并不是世界末日,但是在我的工作stream程中,这仍然是我不想处理的问题。 最后,这里是我的gulpfile.js:/ *文件:gulpfile.js * / var gulp = require('gulp'), gutil = require('gulp-util'); jshint = require('gulp-jshint'); sass = require('gulp-sass'); concat = require('gulp-concat'); uglify = require('gulp-uglify'); sourcemaps = require('gulp-sourcemaps'); imagemin = require('gulp-imagemin'); browserSync = require('browser-sync').create(); […]

Node.js – 自动刷新在Dev

我正在尝试改进我的节点中的DEV经验。 要做到这一点,我想: a)当服务器端代码改变时重启我的服务器 b)当客户端代码改变时刷新浏览器。 为了做到这一点,我开始将nodemon和browserSync集成到我的gulp脚本中。 在我的gulp脚本中,我有以下任务: gulp.task('startDevEnv', function(done) { // Begin watching for server-side file changes nodemon( { script: input.server, ignore:[input.views] }) .on('start', function () { browserSync.init({ proxy: "http://localhost:3002" }); }) ; // Begin watching client-side file changes gulp.watch([ input.css, input.js, input.html ], function() { browserSync.reload(); }); done(); }); 当上述任务运行时,我的浏览器打开到http:// localhost:3000 / 。 我的应用程序是可见的预期。 但是,在控制台窗口中,我注意到: […]

节点更新特定的包

我想更新我的浏览器同步而不更新所有节点包 。 我怎样才能做到这一点? 我当前版本的浏览器同步没有浏览器同步GUI 🙁 ├─┬ browser-sync@1.9.2 │ ├── browser-sync-client@1.0.2

Webpack – 观看并启动nodemon?

感谢@McMath的优秀回答 ,我现在已经有了webpack编译我的客户端和我的服务器。 我现在正在努力使webpack –watch有用。 理想情况下,我想让它在我的服务器进程中产生类似于nodemon的东西,当这个包发生变化时,以及当我的客户端发生变化时,还有一些浏览器同步。 我意识到这是一个捆绑器/加载程序,并不是一个真正的任务亚军,但有没有办法做到这一点? 谷歌结果的缺乏似乎表明我正在尝试新的东西,但这一定已经完成了.. 我总是可以有webpack包到另一个目录,并使用gulp来观看它/复制它/ browsersync – 如果它,但这似乎是一个黑客..有没有更好的办法?

npm WARN可选dep失败,继续fsevents@0.3.6

我安装browserSync npm install browser-sync 但有问题npm WARN optional dep failed, continuing fsevents@0.3.6 这个错误是什么以及如何解决? 吞咽不开始 PS:它工作过。 已经创build了2个项目。 清除caching – 没有帮助

Webpack手表()有多个入口点 – 发射未修改的文件包?

在我的webpack.config.js中,我有3个单独的入口点,一个用于JS包,一个用于主SCSS包,另一个用于单独的SCSS包,与主SCSS包没有任何关系。 当我使用webpack.watch()API时,出于某种原因编辑JS源文件,不仅导致JS包被重新编译,而且导致2个SCSS包。 为什么是这样的,我怎样才能停止这种行为,并确保只有编辑的入口点重新编译? 这是一个问题的原因是我使用浏览器同步,对于CSS捆绑重编译即时注入CSS而不是重新加载,但在HTML / JS编辑其重新加载。 但是,如果我编辑SCSS,它也重新编译JS / HTML浏览器同步触发一个重新加载,而不是一个CSS注入