标签: browser-sync

我正在开发一个gulp用于编译和浏览器同步的网站,以保持浏览器与我的更改同步.

gulp任务正确编译所有内容,但在网站上,我无法看到任何样式,并且控制台显示以下错误消息:

拒绝应用' http:// localhost:3000/assets/styles/custom-style.css '中的样式,因为其MIME类型('text/html')不是受支持的样式表MIME类型,并且启用了严格的MIME检查.

现在,我真的不明白为什么会这样.

HTML包含这样的文件(我非常肯定是正确的):

<link rel="stylesheet" type="text/css" href="assets/styles/custom-style.css"/>

而样式表现在是bootstrap和font-awesome样式之间的合并(没有任何自定义).

路径也是正确的,因为这是文件夹结构:

index.html
assets
|-styles
  |-custom-style.css

但我一直在收到错误.

知道它可能是什么？对于gulp/browsersync这可能是什么(可能是一个设置？)​​？

任何帮助都非常感谢,如果需要,可以随时询问更多细节.

谢谢

我想更新我的浏览器同步而不更新我的所有节点包.我怎样才能做到这一点？我当前版本的Browser-sync没有浏览器同步GUI :(

??? browser-sync@1.9.2
? ??? browser-sync-client@1.0.2

最近从Grunt.js切换到Gulp.js,因为有多个人告诉我它有多好和多快(这是真的!).我已将BrowserSync添加到我的Gulpfile.js中,使其更容易在多个设备上进行测试.它工作得很好,设置简单.对于上下文,我在95%的工作时间内开发WordPress站点,并在启用了Multisite的Apache虚拟主机上运行它们,并为每个客户端设置了许多本地子域,例如site1.domain.dev,site2 .domain.dev等.这很好用,我已经这样做了几年了.但是,由于BrowserSync需要为我的站点创建代理,因此它能够同步并注入CSS,因此当前通过BrowserSync运行的站点将路由到http://localhost:3000.这很好,我理解为什么它需要发生,但它与WordPress有点混乱(因为URL不一样等),加上我是一个大的TypeKit/Cloud字体用户,这意味着因为该网站是被路由到localhost,没有加载任何字体.当然,我可以http://localhost:3000在TypeKit上添加每个站点的域名列表,但这感觉就像是一种解决方法,并且想知道是否有更好的方法来做到这一点.

我已经在我的Gulpfile.js的BrowserSync部分添加了:

gulp.task('serve', function() {
    browserSync({
        proxy: 'site1.domain.dev'
    });

    gulp.watch('assets/styles/source/**/*.scss', ['styles']);
    gulp.watch('*.php', reload);
    gulp.watch('assets/js/source/*.js', ['scripts']);
    gulp.watch('assets/js/plugins/**/*.js', ['plugins']);
});

所以我的问题是,BrowserSync是否可以直接转到我的URL(http://site1.domain.dev)而不是路由它http://localhost:3000？作为一个额外的好处,如果可以从BrowserSync代理属性中删除域,那将是非常棒的,因为我使用自动化脚本在我的WP Multisite安装上设置新站点,并且真的不想编辑我的gulpfile每次我建立一个新网站.

谢谢您的帮助!:)

我使用vagrant并将其配置为更新我的etc/host文件,这是一个例子.

10.20.1.36  example.dev

然后,我可以使用http://example.dev/访问VM的apache服务器

我想从命令行使用browsersync但我无法访问我的网站.我在我的mac主机和vagrant VM上安装了browsersync.我已经使用以下命令从我的mac和VM尝试了它,但它在两种环境中都不起作用.

browser-sync start --proxy "example.dev" --files "public/*.html,public/css/*.css,public/js/*.js"

这是我从Mac获得的

[BS] Proxying: http://example.dev
[BS] Access URLs:
 -------------------------------------
   Local: http://localhost:3000
External: http://192.168.0.10:3000
 -------------------------------------
      UI: http://localhost:3001
 UI External: http://192.168.0.10:3001
 -------------------------------------
[BS] Watching files...

这是VM中发生的事情

[BS] Proxying: http://example.dev
[BS] Now you can access your site through the following addresses:
[BS] Local URL: http://localhost:3000
[BS] External URL: http://10.0.2.15:3000
[BS] Watching files...

当我在mac中运行它时,我可以访问http:// localhost:3001 /上的browsersync ui,但不能访问我的网站.

我不确定我应该在哪里运行它.我应该如何在浏览器中访问该站点.如果我需要转发我的VM中的任何端口.

搜索网页会返回很多结果,但它们都是关于grunt或gulp的,我不会使用其中任何一个.

编辑:我添加了端口转发到vagrant,然后我从虚拟机内启动浏览器同步.现在一切都在http://example.dev:3000和http://example.dev:3001.

这是我添加到我的Vagrantfile中的内容: config.vm.network :forwarded_port, guest: …

我很乐意使用BrowserSync进行开发.但是,页面加载(不仅仅是在更改后重新加载)非常慢.

我用的是proxy模式.在没有BrowserSync的情况下浏览页面应该很快.

安装BrowserSync时,一个原因可能是以下错误:

> ws@0.4.31 install /usr/local/lib/node_modules/browser-sync/node_modules/socket.io/node_modules/engine.io/node_modules/ws
> (node-gyp rebuild 2> builderror.log) || (exit 0)

CXX(target) Release/obj.target/bufferutil/src/bufferutil.o
SOLINK_MODULE(target) Release/bufferutil.node
SOLINK_MODULE(target) Release/bufferutil.node: Finished
CXX(target) Release/obj.target/validation/src/validation.o
SOLINK_MODULE(target) Release/validation.node
SOLINK_MODULE(target) Release/validation.node: Finished

我从头开始安装节点(使用brew和包安装程序),但无法摆脱错误.

此外,如果使用Gulp或命令行运行BrowserSync,则没有任何区别.

任何的想法？

感谢@McMath 的优秀答案,我现在有webpack编译我的客户端和我的服务器.我现在正努力webpack --watch做到有用.理想情况下,当我的客户端发生变化时,我想让它为我的服务器进程生成类似nodemon的东西,以及当我的客户端发生变化时的某些类型的browserync.

我意识到它是一个捆绑器/加载器,而不是真正的任务运行器,但有没有办法实现这一目标？缺乏谷歌搜索结果似乎表明我正在尝试新的东西,但这一定已经完成了..

我总是可以将webpack包放到另一个目录并使用gulp来观察/复制它/ browsersync-ify它,但这看起来像是一个黑客..有更好的方法吗？

我只用这个命令安装了NodeJS和BrowserSync:

npm install -g browser-sync 

使用此命令启动服务器后:

C:\xampp\htdocs\browser_sync
? browser-sync start --server
[BS] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.223:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.223:3001
 --------------------------------------
[BS] Serving files from: ./

我收到以下错误:无法获取/

我很困惑,因为我想在我的Laravel项目中使用BrowserSync.

我应该在哪里安装BrowserSync？

谢谢.

在我的webpack.config.jsI中有3个单独的入口点,一个用于JS包,一个用于主SCSS包,另一个用于与主SCSS包无关的单独 SCSS包.

当我使用webpack.watch()API时,出于某种原因编辑JS源文件,不仅会导致重新编译JS包,还会导致2个SCSS包.
为什么会这样,以及如何停止此行为并确保仅重新编译已编辑的入口点？

这是一个问题的原因是我正在使用browsersync,对于CSS bundle重新编译我只是注入CSS而不是重新加载,但是在HTML/JS上编辑它的重新加载.但是,如果我编辑SCSS并且它还重新编译JS/HTML browsersync触发器重新加载而不是CSS注入.

我正在尝试使用gulp和browser-sync重定向我的API请求:

gulp.task('browser-sync', function () {

   var files = [
      '../index.html',
      '../views/**/*.html',
      '../assets/css/**/*.css',
      '../assets/js/**/*.js'
   ];

   var url = require('url'),
   proxy = require('proxy-middleware');
   var proxyOptions = url.parse('http://localhost:8000/api');
   proxyOptions.route = '/api';

   browserSync.init(files, {
      server: {
         baseDir: '..',
         middleware: [proxy(proxyOptions)]
      }
   });

});

但是当我向API发送一个调用时,我得到了这个响应:

Error: connect ECONNREFUSED
    at errnoException (net.js:904:11)
    at Object.afterConnect [as oncomplete] (net.js:895:19)

关于我做错了什么的任何想法？

我们的团队使用带有自耕农的gulp-angle发电机来构建我们的网络应用程序.它使用browsersync来处理我们想要的实时重载.但是,我们刚刚部署到我们的开发服务器,现在当两个开发人员同时使用gulp serve命令时,它们都显示在同一窗口中(即一个开发人员在一个窗口上键入,它显示在另一个开发人员的窗口中以及).我相信这是由于BrowserSync的跨设备测试功能,但我对如何禁用此功能感到茫然.如果有人知道如何做到这一点(最好不要禁用我们的实时重新加载功能),请告诉我!

下面是gulp文件夹中我的server.js文件的代码,它与gulp-angular生成器附带的代码相同,所以希望这对一些人有帮助.

'use strict';

var path = require('path');
var gulp = require('gulp');
var conf = require('./conf');

var browserSync = require('browser-sync');
var browserSyncSpa = require('browser-sync-spa');

var util = require('util');

var proxyMiddleware = require('http-proxy-middleware');

function browserSyncInit(baseDir, browser) {
  browser = browser === undefined ? 'default' : browser;

  var routes = null;
  if(baseDir === conf.paths.src || (util.isArray(baseDir) && baseDir.indexOf(conf.paths.src) !== -1)) {
    routes = {
      '/bower_components': 'bower_components'
    };
  }

  var server = {
    baseDir: baseDir,
    routes: routes
  };

  /*
   * You can …