我正在构建一个基本的React/Flux应用程序,并使用react-router-component进行路由,使用browser-sync进行构建更改的实时重新加载,并使用browserify进行依赖注入.

我的问题是,当现场重装或重装这不是一个路径上发生/(即/profile,/gallery等...),我得到的不能得到一个错误信息/path(或与此有关的任何途径).

我怀疑这与它是单页应用程序并且所有路由都在客户端上完成这一事实有关.

这是我的浏览器同步设置(这是非常基本的).我认为我可能需要添加一些中间件,但我不确定实际放入中间件的内容.

gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: './client'
        },
        notify: false
    });
});

我正在尝试为.NET MVC应用程序设置一个gulp浏览器同步构建系统,除了每次进行更改时使用浏览器同步进行实时重新加载外,一切都正常工作.这是我有史以来的第一次尝试,所以我可能会做一些简单的错误.这是我的gulpfile.js

var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    jshint = require('gulp-jshint'),
    watch = require('gulp-watch'),
    livereload = require('gulp-livereload'),
    browserSync = require('browser-sync'),
    concat = require('gulp-concat');

//minify js
gulp.task('minifyJS', function () {
    gulp.src('Scripts/**/*.js')
        .pipe(concat('app.js'))
        .pipe(gulp.dest('Scripts'))
});

gulp.task('minifyCSS', function () {
    gulp.src('Content/**/*.css')
        .pipe(concat('app.css'))
        .pipe(gulp.dest('Content'))
});

//browsersync
gulp.task('browserSync', function () {
    var files = [
       'Scripts/**/*.js',
       'Content/**/*.css',
       'Views/**/*.cshtml'
    ];

    browserSync.init(files, {

        proxy: "http://localhost:55783/"
    });
});

//default task wraps the two
gulp.task('default', ['minifyJS', 'minifyCSS', 'watch', 'browserSync']);

//watch tasks
gulp.task('watch', function () {
    var jsWatcher = …

有jekyll serve没有像grunt/gulp这样的其他工具可以运行像livereload(或browsersync)这样的系统？

我期待的是编辑css,sass,html或md文件并让浏览器页面自动重新加载.

我正在使用Jekyll 2.5.x.

在代理模式下运行时,Browsersync似乎无法加载网站.当使用相同的配置但其他网站确实有用时,所以它必须是我本地设置中的东西,但我一直无法弄清楚是什么.

我在Windows上运行它,代理一个运行在localhost:5000上的ASP.NET 5应用程序.直接导航到这个位置工作正常.试图挂钩ASP.NET端的管道信号表明html是通过管道导出的,但浏览器从未收到响应并保持挂起状态.

日志输出表明除了不同的会话和明显的代理URL之外没有区别,如果我在另一个网站上运行它,其中localhost上的其他站点似乎也可以工作(在IIS上).

使用的配置(gulp):

gulp.task('browsersync', function () {
    browserSync({
        proxy: 'localhost:5000',
        notify: true,
        open: true,
        logLevel: 'debug'
    });
});

我有一个远程Linux服务器,我正在运行Node.js应用程序,通过nginx at代理http://www.example.com.

我gulp用BrowserSync安装(用于SASS编译).每当我gulp在服务器上启动时,访问URL都是这样的:

[BS] Access URLs:
 ----------------------------------
       Local: http://localhost:3000
    External: http://10.0.2.15:3000
 ----------------------------------
          UI: http://localhost:3001
 UI External: http://10.0.2.15:3001
 ----------------------------------

所以,这不会起作用,因为我没有尝试通过localhost访问服务器.我需要访问它的实际网址:http://www.example.com.当我浏览到http://www.example.com我可以在页面中看到BrowserSync没有注入页面.

我一直在搞乱BrowserSync代理选项,但它们并不清楚.我在我的gulp任务中尝试了以下内容:

browserSync.init({
  proxy: {
    target: 'http://www.example.com:4000'
  }
});

然后我明白了:

[BS] Proxying: http://www.example.dev:4000
[BS] Access URLs:
 ----------------------------------
       Local: http://localhost:3000
    External: http://10.0.2.15:3000
 ----------------------------------
          UI: http://localhost:3001
 UI External: http://10.0.2.15:3001
 ----------------------------------

但是端口4000在防火墙上没有打开,因此无法正常工作.这是正确的方法,我只需要打开那个端口吗？为什么它不适用于端口80？还是我离开这个？

我正在使用Polymer并手动重新加载文件中的更改。因此，我尝试使用using browser-sync并且也browser-sync with gulp无法成功。

我尝试了以下两种方法：

1）package.json中的npm脚本

"scripts": {
    "dev": "polymer serve | npm run watch",
    "watch": "browser-sync start --proxy localhost:8080 --files 'src/*.html, src/*.js, images/*' "
  },

使用运行它npm run dev，它运行了但无法检测到文件中的更改。

2）在浏览器同步中使用gulp

var gulp = require('gulp');
var bs = require('browser-sync').create(); 

gulp.task('browser-sync', function() {
    bs.init({
       port : 5000,
        proxy: {
          target : "localhost:8080"
        }
    });
});

gulp.task('watch', ['browser-sync'], function () {
    gulp.watch("*.html").on('change', bs.reload);
});

它还运行，但无法检测*.html文件src夹中存在的文件更改。

谁能帮助我，为什么未检测到文件更改。

所以我想将browsersync连接到一个我无法控制的网站.基本上我希望它用我的计算机上的css文件替换实时站点上的css文件(它从一堆较少的文件中编译).当更改本地css文件时,browsersync应该像通常那样注入css.我正在使用browsersync和gulp,因为我还想运行其他任务.

下面的代码将打开gulpjs.com并正确匹配gulpjs.com中的main.css,并尝试在其中提供一些东西.但我得到的是main.min.css的404.它在这里寻找它

HTTP://本地主机:3000/CSS/main.min.css

我压缩了测试项目(不包括节点模块),你可以在这里下载 - https://www.dropbox.com/s/5x5l6bbxlwthhoo/browsersyncTest.zip?dl=0

这是我到目前为止所拥有的......

项目结构

css/ main.min.css (compiled from app.less)

less/ app.less

gulpfile.js 

package.json

的package.json

{
  "name": "browsersyncTest",
  "devDependencies": {
    "autoprefixer": "^6.7.0",
    "browser-sync": "^2.18.6",
    "cssnano": "^3.10.0",
    "gulp": "^3.9.1",
    "gulp-clean-css": "^2.3.2",
    "gulp-less": "^3.3.0",
    "gulp-postcss": "^6.3.0",
    "gulp-rename": "^1.2.2",
    "gulp-uglify": "^2.0.0",
    "gulp-watch": "^4.3.11"
  }
}

gulpfile.js

var gulp = require('gulp');
var less = require('gulp-less');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
var cleancss = require('gulp-clean-css');
var rename = require('gulp-rename');
var watch = require('gulp-watch');
var browserSync …

您好:在构建项目时,我收到此错误:

2017-04-13 12:05 gulp[64643] (FSEvents.framework) FSEventStreamStart: ERROR: FSEvents_connect() => (ipc/send) invalid destination port (268435459)

在吞咽过程结束时跟着这个[我不知道它们是否相关]

Message:
Command failed: /Users/toddpage/Code/RollKall-Coordinator-Portal/node_modules/node-notifier/vendor/terminal-notifier.app/Contents/MacOS/terminal-notifier -title "Gulp notification" -message "Finished Script compilation" -appIcon "/Users/toddpage/Code/RollKall-Coordinator-Portal/node_modules/gulp-notify/assets/gulp.png"

Details:
    killed: false
    code: null
    signal: SIGABRT
    cmd: /Users/toddpage/Code/RollKall-Coordinator-Portal/node_modules/node-notifier/vendor/terminal-notifier.app/Contents/MacOS/terminal-notifier -title "Gulp notification" -message "Finished Script compilation" -appIcon "/Users/toddpage/Code/RollKall-Coordinator-Portal/node_modules/gulp-notify/assets/gulp.png"

我已经撤消了可能导致此问题的任何代码更改,并重建了该项目,但我仍然收到此错误.任何帮助都会受到高度赞赏.

谢谢!

可以BrowserSync投放HTTP和HTTPS在不同的端口？

const bs = require('browser-sync').create();

bs.init({
    server: "./app",
    port: 8080
    https: false,
    ....
});

根据文档,可以选择将协议切换到HTTPS.我想同时拥有它们:8080端口上的HTTP和8443端口上的HTTPS.

我在docker容器中通过Gulp运行browsersync时遇到问题。我正在使用Laradock。

我试图从以下答案推断：Docker容器内的Browsersync，但我只能使UI显示在端口3001上。

我不清楚我应该为代理做什么。我尝试了许多组合，例如：

function browserSync(done) {
  browsersync.init({
    proxy: 'workspace:22', notify:false, open:false
  });
  done();
}

// -----------------

function browserSync(done) {
  browsersync.init({
    proxy: 'workspace:3000', notify:false, open:false
  });
  done();
}

// ---------------

function browserSync(done) {
  browsersync.init({
    proxy: 'localhost', notify:false, open:false
  });
  done();
}

我在工作区服务下的docker-compose.yml中添加了3000和3001

### Workspace Utilities ##################################
    workspace:
      build:
        context: ./workspace
        args:
          - LARADOCK_PHP_VERSION=${PHP_VERSION}
          - LARADOCK_PHALCON_VERSION=${PHALCON_VERSION}
          - INSTALL_SUBVERSION=${WORKSPACE_INSTALL_SUBVERSION}
          - INSTALL_XDEBUG=${WORKSPACE_INSTALL_XDEBUG}
          - INSTALL_PHPDBG=${WORKSPACE_INSTALL_PHPDBG}
          - INSTALL_BLACKFIRE=${INSTALL_BLACKFIRE}
          - INSTALL_SSH2=${WORKSPACE_INSTALL_SSH2}
          - INSTALL_GMP=${WORKSPACE_INSTALL_GMP}
          - INSTALL_SOAP=${WORKSPACE_INSTALL_SOAP}
          - INSTALL_XSL=${WORKSPACE_INSTALL_XSL}
          - INSTALL_LDAP=${WORKSPACE_INSTALL_LDAP}
          - INSTALL_IMAP=${WORKSPACE_INSTALL_IMAP}
          - INSTALL_MONGO=${WORKSPACE_INSTALL_MONGO}
          - INSTALL_AMQP=${WORKSPACE_INSTALL_AMQP} …