标签: browser-sync

我正在使用Gulp和BrowserSync来为我的webapp服务localhost:9000.
我该如何服务于webapp localhost:9000/some/multi/level/path呢？

我刚刚安装了Laravel 5.3,这是一个全新的安装,在查看了Docs后我设置了我的Gulpfile如下:

elixir((mix) => {
    mix.sass('app.scss')
       .webpack('app.js')
       .version(['css/app.css', 'js/app.js'])
       .browserSync({
         proxy: 'subdomain.mydomain.dev'
       });
});

出于某种原因,我每次运行gulp watch它都会启动浏览器localhost:3000

我究竟做错了什么？如果我设置地址完全相同,是不是应该将BrowserSync指向我的Mamp Vhost？

有人能告诉我为什么我的代理URL不能与BrowserSync和Gulp一起使用吗？相反,它只是继续使用http:// localhost:3000作为开发URL.

gulp.task('watch', ['bs'], function() {
  gulp.watch('scss/*.scss', ['scss', browserSync.reload]);
});

gulp.task('bs', function() {
    browserSync.init(['css/style1.css', 'css/style2.css'], {
      proxy: 'dev.site.com'
    });
});

gulp.task('default', ['scss', 'watch']);

我正在使用browsersync + gulp和一些很酷的浏览器插件,perfectPixel来命名一个.我的问题是每次我保存我的工作,它会强制浏览器重新加载,从而清除浏览器并关闭我的浏览器扩展.这导致我必须重新激活插件并继续这个效率低下的工作流程.有没有人有任何想法？

更新2015年7月7日 在Matthew下面,提供了一些包含websockets的解决方案的链接,但是我无法使用我的gulp设置.

var gulp = require('gulp'),
    open = require('gulp-open'),
    browserSync = require('browser-sync').create();

var WebSocketServer, socket, wss;

WebSocketServer = require('ws').Server;

wss = new WebSocketServer({
    port: 9191
});

var reload = browserSync.reload;

var paths = {
    css: 'app/REPSuite/web/static/css/*.css',
    js: 'app/REPSuite/web/static/js/*.js',
    html: 'app/*.html'
};

gulp.task('reload', function() {
    var client, i, len, ref, results;
    ref = wss.clients;
    results = [];
    for (i = 0, len = ref.length; i < len; i++) {
        client = ref[i];
        results.push(client.send('reload'));
    } …

我在.NET应用程序中使用Browsersync.我只使用Windows身份验证设置了iis(禁用匿名身份验证).我得到402.1.当然我可以将匿名设置为启用,它将加载页面,但我将是匿名的,这不是理想的结果.我不太确定在Browsersync中设置哪些选项以使其在Windows身份验证模式下工作.

我正在使用下面的内容并认为它是由于不正确的标题？

browserSync.init({
        proxy: {
            target: 'http://localhost:4300',
            reqHeaders: {
                "host": config.urlObj.host,
                "accept-encoding": "identity",
                "agent": false
            }
        }
    });

我在服务器模式下使用BrowserSync(使用其内置的静态服务器)和GulpJS在本地项目上,除了BrowserSync服务器启动非常慢之外,一切似乎都正常工作.当我运行Gulp时,BrowserSync本身似乎立即初始化,但服务器启动并返回访问URL大约需要4到5分钟(有时甚至更多).在此期间,一切都继续运行,BrowserSync响应reload()调用等,但通过常用URL(在本例中为localhost:3000和localhost:3001)无法访问.返回访问URL后,服务器似乎已启动,BrowserSync的页面刷新工作正常,实际上非常快.

我尝试了几种不同的gulpfile.js配置,尝试了不同的方法来初始化BrowserSync,调用stream()和reload()方法的不同方法(包括尝试BrowserSync的基本Gulp/SASS"配方")和不同的端口号,但所有配置都有同样的问题.我甚至试过禁用我的防火墙和AV软件(Avast),但没有.

我正在运行Windows 8.1,如果这是相关的.BrowserSync通过NPM在本地新安装到项目中,而对其他目录的新的本地安装也存在同样的问题.NPM,Ruby,Gulp和所有模块似乎都是最新的.值得一提的是,我对Ruby,Gulp和Node.js的所有其他经验都非常流畅且没有问题.

我找不到任何其他帖子提到这个问题,我开始认为这是正常的行为.这是正常的,如果没有,是否有人有任何想法尝试？这个延迟并不是世界末日,因为BrowserSync服务器始终(最终)启动,但它仍然是我工作流程中的一个问题,我宁愿解决而不仅仅是处理.

最后,这是我的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();

gulp.task('default', ['watch'], browserSync.reload);

// JSHint
gulp.task('jshint', function() {
  return gulp.src('src/js/**/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('jshint-stylish'));
});

// Build JS
gulp.task('build-js', function() {
  return gulp.src('src/js/**/*.js')
    .pipe(sourcemaps.init())
      .pipe(concat('main.js'))
      //only uglify if gulp is ran with '--type production'
      .pipe(gutil.env.type === 'production' ? uglify() : gutil.noop()) 
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('public/www/js/core'));
});

// Build CSS
gulp.task('build-css', …

我在gulp任务中使用浏览器同步,例如:

gulp.task('gulp-task',function(){
    browserSync.init({
        server:{
            baseDir: 'app'
        }
    }) 
    //rest of task 
 });

我在gulp watch中使用这个gulp任务(例如)app/**/*.html像:

gulp.task('watch',function(){
    gulp.watch('app/**/*.html', ['gulp-task']);
});

首次更改html文件一切正常,但对于下一次更改我得到错误: TypeError: args.cbn is not a function ...

伙计们说用以下命令安装浏览器同步的最新版本:

npm install browser-sync@latest --save-dev

它没有帮助.

我收到同样的错误.怎么了？

这是一个Angular2应用程序,该组件在这里简化为:

@Component({
    selector: 'courses',
    template: `
        <input [(ngModel)]="wahla">
        <input [(ngModel)]="wahla">
        {{ wahla }}
        `
})
export class CoursesComponent {
    wahla = "hmm hmm ha ha";
}

我认为应用程序在一个页面中使用双向绑定工作正常,但是如果我用http:// localhost:3000 /打开另一个选项卡然后在第一页的第一个输入框中粘贴或键入内容,那么第二个tab实际上为其第一个输入框更新,而第二个输入框和静态文本不更新.

对于第一个选项卡,所有内容都按预期更新.

这应该发生还是可能出错？这正在运行使用npm startBrowserSync运行lite-server.

我找到了本教程,其中讨论了如何使用浏览器同步的pre-gzipped资源示例.

它拿起*.html,*.css,*.js,*.{jpg,png}在Firefox v51.0.1(当前版本),但与上一版本(V50),它产生404错误与.html文件,但发现预gzip压缩的文件复制到另一个文件.

据我所知,它没有找到该文件,因为在预先压缩的资源中,文件是.*.gzip.

我不明白的是,为什么firefox lt 51不会渲染connect-gzip-static告诉它渲染的文件.

这是我的bs-config.js:

var Environement = require("./env");
var indexFile = Environement.enableProd ? '/index.html' : '/index_dev.html';
var middleware  = require('connect-gzip-static')('./web_app');

module.exports = {
  notify: false,
  logLevel: "silent",
  server: {
    middleware: {      
      0: null,     // removes default `connect-logger` middleware
      1: require('connect-history-api-fallback')({
        index: indexFile
      }),
      2: middleware
    }
  },
  ghostMode: false
};

有没有其他方法可以解决这个问题？这里有没有人遇到过和我一样的问题？

注意:使用chrome,IE Edge和FF v51,它可以完美运行.

我正在使用带有webpack-dev-server的Browser Sync，并且在使用浏览器同步时遇到了问题。只有表格填写有效，单击，滚动在浏览器同步中不起作用，并且没有发生任何编译时错误，但是以上这些都不起作用..！这是我的“ Webpack.dev.js”文件，那么这里有什么问题呢？

const helpers = require('./helpers');
const buildUtils = require('./build-utils');
const webpackMerge = require('webpack-merge'); 
const commonConfig = require('./webpack.common.js');

const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
const NamedModulesPlugin = require('webpack/lib/NamedModulesPlugin');
const EvalSourceMapDevToolPlugin = require('webpack/lib/EvalSourceMapDevToolPlugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');

module.exports = function (options) {
  const ENV = process.env.ENV = process.env.NODE_ENV = 'development';
  const HOST = process.env.HOST || 'localhost';
  const PORT = process.env.PORT || 3000;

  const METADATA = Object.assign({}, buildUtils.DEFAULT_METADATA, {
    host: HOST,
    port: PORT,
    ENV: ENV,
    HMR: helpers.hasProcessFlag('hot'),
    PUBLIC: process.env.PUBLIC_DEV || HOST + ':' …