标签: browser-sync

我已经接近完成grunt-browser-sync工作,但还没有完成.

我想出了这个Gruntfile:

module.exports = function(grunt) {    
    grunt.initConfig({
        pkg : grunt.file.readJSON('package.json'),
        concat : {
            dist : {
                src : ['js/libs/*.js', 'js/custom/*.js'],
                dest : 'js/build/production.js',
            }
        },
        uglify : {
            dist : {
                src : 'js/build/production.js',
                dest : 'js/build/production.min.js'
            }
        },
        sass : {
            dist : {
                options : {
                    style : 'compressed',
                    compass : 'true',
                },
                files : {
                    'css/main.css' : 'sass/main.scss'
                }
            }
        },
        autoprefixer : {
            options : {
                browsers : ['> 5%', 'last 2 version', 'ie …

运行gulp服务,会导致以下错误:

[BS] [debug] Getting option: socket.path
[BS] [debug] Getting option: socket.namespace

events.js:72
        throw er; // Unhandled 'error' event
          ^
Error: spawn ENOENT
    at errnoException (child_process.js:1001:11)
    at Process.ChildProcess._handle.onexit (child_process.js:792:34)

只有在运行浏览器同步时才显示,这是我的浏览器同步配置:

browserSync({
    notify: false,
    server: {
        baseDir: ['app']
    },
    watchOptions: {
        debounceDelay: 250
    },
    startPath: "/" + view + ".html",
    injectChanges: true,
    logLevel: "debug",
    browser: ["google chrome"] 
});

我正在运行以下版本:

节点:0.10.33 gulp:3.8.10浏览器同步:1.8.2(也试过1.9.x)

startpath是正确的并且存在,禁用ghostMode没有帮助.

我有一个运行浏览器同步的任务。

var options = {
        proxy :          'localhost:9000/html' ,
        port :           3000 ,
        files :          [
            config.root + config.srcPaths.htmlBundle ,
            config.htmlRoot + 'main.css' ,
            '!' + config.htmlRoot + '**/*.scss'
        ] ,
        injectChanges :  false ,
        logFileChanges : true ,
        logPrefix :      'broserSync ->' ,
        notify :         true ,
        reloadDelay :    1000
    };
browserSync( options );

browsersync会检测到更改并尝试注入更改，但chrome阻止此错误：

拒绝连接到“ ws：// localhost：3000 / browser-sync / socket.io /？EIO = 3＆transport = websocket＆sid = gOQQPSAc3RBJD2onAAAA”，因为它违反了以下内容安全策略指令：“ default-src'self'”。请注意，未明确设置“ connect-src”，因此将“ default-src”用作后备。

未捕获到的SecurityError：无法构造'WebSocket'：拒绝连接到'ws：// localhost：3000 / browser-sync / socket.io /？EIO …

我正在开发一个项目,我的工作区直接位于远程服务器中.

到目前为止,我在src文件中使用自己的ip加载browser-sync-client:

<script type='text/javascript' id="__bs_script__">//<![CDATA[
document.write("<script async src='MYIP:3000/browser-sync/browser-sync-client.1.9.2.js'><\/script>".replace(/HOST/g, location.hostname).replace(/PORT/g, location.port));//]]></script>

但我遇到了跨源请求问题.

知道如何配置我的gulp吗？

  browserSync({files: [constants.CSS_FOLDER+"/**/*.css"]});

谢谢 !

我正在尝试将 BrowserSync 配置为在服务器模式下工作，并使用http-proxy-middleware将我的 API 请求代理到在不同端口的同一台机器上运行的后端。我使用 Gulp 来启动 BrowserSync。

BrowserSync 在端口 8081 上运行。我的后端在 8080 上运行。

这是我创建代理中间件的方法：

var proxyApi = proxy('/api', {target : 'http://localhost:8080/api', logLevel : 'debug'});

这是我从 Gulp 任务运行 BrowserSync 的方式：

// Init BrowserSync with proxies as middleware and based on the dest dir
browserSync.init({
    open: true,
    port: config.proxyPort,
    server: {
        baseDir: config.destDir,
        middleware: [proxyApi]
    },
    browser: "google chrome"
});

输出 ：

[HPM] Proxy created: /api  ->  http://localhost:8080/api

一切看起来都不错。

但是当我点击 eg 时http://localhost:8081/api/users，输出是：

[HPM] GET /api/users/123 -> http://localhost:8080/api …

我刚刚安装了Firefox Dev Edition，但我不知道如何browsersync在启动它时启动它。

我知道有一个browser选项可以指定“firefox”，但如何区分一个 FF 安装与另一个安装？

如果我安装了各种常规 FF（例如 3.5、48.x 和 50.x），问题也会相同。

我总是可以手动打开正确的 FF 并在 browsersync 启动后加载页面，但我希望它手动执行此操作（并且不要在我的常规非开发 FF 中打开）。

我正在尝试使用 lite-server 为 Angular 项目提供服务。每当请求资产文件夹中的文件时，服务器都会响应 404。我创建了 bs-config.json 并且设置路由选项不起作用。

这是我的目录结构

节点模块/
源代码/
..应用程序/
....index.html
..资产/
....img/
..配置/
....bs-config.json

bs-config.json

{
  "port": 8000,
  "files": ["../src/**/*.{html,htm,css,js}"],
  "server": { 
    "baseDir": ["./src/app", "./"],
    "routes": {
      "/assets": "../assets"
    }
  }
} 

我如何尝试加载文件。（索引.html）

<img src="assets/img/image.png">

我克隆了Angular快速入门.然后我跑了npm install,然后npm start.这就是我得到的.

$ npm start

> angular-quickstart@1.0.0 prestart /home/ecarroll/code/angular/quickstart
> npm run build


> angular-quickstart@1.0.0 build /home/ecarroll/code/angular/quickstart
> tsc -p src/


> angular-quickstart@1.0.0 start /home/ecarroll/code/angular/quickstart
> concurrently "npm run build:watch" "npm run serve"

[1] 
[1] > angular-quickstart@1.0.0 serve /home/ecarroll/code/angular/quickstart
[1] > lite-server -c=bs-config.json
[1] 
[0] 
[0] > angular-quickstart@1.0.0 build:watch /home/ecarroll/code/angular/quickstart
[0] > tsc -p src/ -w
[0] 
[1] ** browser-sync config **
[1] { injectChanges: false,
[1]   files: [ './**/*.{html,htm,css,js}' ],
[1]   watchOptions: …

我一直试图用broswersync解决这个问题几天.任何帮助都将受到高度赞赏.

我的环境:

我在Ubuntu的Windows和我的服务器上是一个流浪盒.我有端口转发,并使用端口3000映射到我的流浪汉端口3000.所以我在主机上使用的URL是http:// localhost:3000/index.html,如果来自外部,那么http:// MY_IP_ADDRESS:3000/index.html

描述:

我有CSS注入,重新加载,表单同步,点击,在所有浏览器和设备上工作.什么是不起作用的是同步滚动,下面是场景.

1. 滚动同步仅适用于Chrome,在桌面模式下,即,如果我在桌面模式下在多个窗口中以chrome打开相同的URL,它可以正常工作.
2. 如果我在Chrome和桌面模式下启用了移动模式,则滚动同步不起作用.
3. 如果我在firefox,safari,IE上打开链接,则滚动同步不适用于它们.
4. 我无法通过在多个设备上打开链接来滚动浏览不同的设备和浏览器.

我的口服:

我在Windows工作,但我的服务器在vagrant/ubuntu上.这是我的浏览器同步和监视的Gulp配置.

// Static server
gulp.task('browser-sync', function () {
        browserSync({
                server: {
                        baseDir: "www"
                },
                ghostMode: {
                        scroll: true
                }
        });
});
// Static Server + watching scss/html files
gulp.task('serve', ['scss'], function () {

        browserSync({
                server: "./www"
        });
        gulp.watch(paths.scss, ['scss',browserSync.reload]);
        gulp.watch(paths.html, ['html',browserSync.reload]);
        gulp.watch(paths.js, ['js',browserSync.reload]);
        //gulp.watch("*.html").on('change', reload);
});

感谢您提前的帮助..

在处理Web项目时,我遇到了一些令人沮丧的404错误.我正在为我的CSS和JS文件使用这个文件结构:

bower_components
    bootstrap
        |dist
            |css
               | bootstrap.min.css
    angular
        |angular.min.js
    jquery
        |dist
            |jquery.min.js
dist
lib
    |farbtastic.js
node_modules
src
    |img
    |styles
    |scripts
    |view1
    |view2
    |index.html //running browserSync from this folder using this file as index

当我尝试index.html使用适当的语法引用文件时:

<link rel="stylesheet" type="text/css" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">

我得到404"无法加载资源"错误.

该../语法似乎是正确的,我的控制台显示,它看起来在正确的位置http://localhost:3000/bower_components/bootstrap/dist/css/bootstrap.min.css.

有什么东西我没做错吗？