标签: browser-sync

我正在尝试将浏览器同步与 Gulp 4 一起使用，但 bs 没有保留状态，而是进行了完全刷新。这不是很有用。似乎 bs 不再支持真正的注入。如果你想贡献，我在 GH 上提交了一个问题。

这是相关的代码：

// styles:dev task    
gulp.task('styles:dev', function() {
    return gulp.src(config.src)
        .pipe(sourcemaps.init())
        .pipe(postcss(config.postcss.dev))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(config.dest.dev))
        .pipe(browserSync.stream());
});

// browserSync task    
gulp.task('browserSync', function(cb) {
    browserSync.init(config, cb);
});

// Watch task:
gulp.task('watch:styles', function() {
    return gulp.watch(config.paths.css,
        gulp.series('styles:dev'));
});

gulp.task('watch', gulp.parallel('watch:styles'));

// default task    
gulp.task('default',
    gulp.series('clean:dev',
        gulp.parallel('copy:dev', 'styles:dev'), 'browserSync', 'watch')
);

提前致谢。

我在我的网站上使用 BrowserSync。以下实时重新加载我的 CSS 更改，但它会在http://localhost:3000/打开一个网页

gulp.task('sass-watch', ['theme-css'], browserSync.reload);

gulp.task('browser-sync', function() {
  var files = [
    'htdocs/themes/custom/my-theme/dist/*'
  ];
  browserSync.init(files,{
    proxy: 'mysite.com'
  });
});

我的站点是通过 Vagrant 配置的，可以在 mysite.com 上本地访问。如何让 BrowserSync 在这个自定义 URL 上工作？

由于我的 VM 正在使用端口 80，因此我尝试了以下操作。

gulp.task('browser-sync', function() {
  var files = [
    'htdocs/themes/custom/my-theme/dist/*'
  ];
  browserSync.init(files,{
    open: 'external',
    host: 'mysite.com',
    proxy: 'mysite.com',
    port: 80
  });
});

但是我收到一个错误：

events.js:141
      throw er; // Unhandled 'error' event
      ^

Error: listen EACCES 0.0.0.0:80
    at Object.exports._errnoException (util.js:874:11)
    at exports._exceptionWithHostPort (util.js:897:20)
    at Server._listen2 (net.js:1221:19)
    at listen …

我正在使用 John Papa 的 lite 服务器和 chimurai 的 HTTP 代理中间件作为开发服务器。问题出在我的会话 cookie 上，我无法保留来自真实服务器的会话 cookie。我看到了这个解决方案：https : //github.com/chimurai/http-proxy-middleware/issues/78

但我发现与我的 bs-config.js 没有相似之处：

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

module.exports = {
    port: 3003,
    server: {
        middleware: {
            1: proxy('demo/webservice/jaxrs', {
                target: 'https://localhost:8443',
                secure: false, // disable SSL verification
                changeOrigin: true   // for vhosted sites, changes host header to match to target's host
            }),
            2: require('connect-history-api-fallback')({index: '/index.html', verbose: true})
        }
    }
};

有人知道如何合并这两个吗？

更新：这是响应标头的一部分：

set-cookie:JSESSIONID=620083CD7AEB7A6CC5772AC800E673E3; Path=/appServer/webservice/jaxrs; Secure
strict-transport-security:max-age=31622400; includeSubDomains
Transfer-Encoding:chunked

UPDATE2：我认为我的配置应该是这样的：

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

function …

我正在通过 lite-server 使用 browsersync，并具有以下配置：

{
    "port": 8000,
    "files": [
        "./src/**/*.{html,htm,css,js}"
    ],
    "server": {
        "baseDir": "./src",
        "routes": {
            "node_modules": "../node_modules" <--- Attempt to serve node_modules
        }
    }
}

项目布局是这样的：

node_modules src |-app |-index.html |-systemjs.config.js package.json bs-config.json

问题是，在index.html任何引用中，如 <script src="node_modules/....js">以 404 失败。

如何提供 .src 目录之外的路径？

有时当我运行我的服务器时，控制台会给我一个错误：

无法加载“ http://localhost:3000/browser-sync/socket.io/?EIO=3&transport=polling&t=Lm2wn4p ”。ServiceWorker 向 FetchEvent.respondWith() 传递了一个承诺，该承诺以非响应值“未定义”解决。

我不知道发生了什么

服务工作者.js：

importScripts('assets/js/cache-polyfill.js');

var CACHE_VERSION = 'app-v1';
var CACHE_FILES = [
    'index.html'
];

self.addEventListener('install', function (event) {
    event.waitUntil(
        caches.open(CACHE_VERSION)
            .then(function (cache) {
                console.log('Opened cache');
                return cache.addAll(CACHE_FILES);
            })
    );
});

self.addEventListener('activate', function (event) {
    event.waitUntil(
        caches.keys().then(function(keys){
            return Promise.all(keys.map(function(key, i){
                if(key !== CACHE_VERSION){
                    return caches.delete(keys[i]);
                }
            }))
        })
    )
});

self.addEventListener('fetch', function (event) {
    event.respondWith(
        caches.match(event.request).then(function(res){
            if(res){
                return res;
            }
            requestBackend(event);
        })
    )
});

function requestBackend(event){
    var url = event.request.clone();
    return fetch(url).then(function(res){
        //if not a …

我正在构建一个 React 应用程序，它有几个用户交互阶段需要导航。在流程后期的阶段工作需要大量交互才能在重新加载页面以更改 JS 时返回到同一点。

Webpack 支持 HMR，它仅替换修改后的 React 组件，这意味着每次更改都不必重新加载整个应用程序，似乎 Rollup 不支持此行为。

Rollup 有哪些替代方案可以加快 React 应用程序的开发过程？我无法每次都手动输入输入数据以达到用户旅程中的同一点的整个过程。

我目前正在使用 Rollup 来捆绑 ES6 样式导入，将它们传递给 Babel，其输出是使用 Browsersync 提供的。这一切都是通过 Gulp 处理的。

吞咽配置：

const babelConfig = {
    exclude: 'node_modules/**',
    "presets": [['es2015', { modules: false }], 'react'],
    "plugins": ["external-helpers", "transform-remove-strict-mode", "transform-object-rest-spread"],
    babelrc: false
};

const rollupJS = (inputFile, options) => {
    let notifier = require('node-notifier');

    return () => {
        return plugins.rollupStream({
            entry: options.basePath + inputFile,
            format: options.format,
            sourceMap: options.sourceMap,
            plugins: [
                plugins.rollupPluginBabel(babelConfig),
                plugins.rollupPluginReplace({ 'process.env.NODE_ENV': JSON.stringify('dev') }), //production …

某些东西使我的开箱即用的 Laravel 项目能够在浏览器同步页面上无限加载browser-sync。browser-sync-webpack-plugin它在 上运行良好http://localhost，但浏览器同步（localhost：3000）版本不会停止加载并且不显示任何内容，仅显示一个白色页面。

我发现这个问题与我的相似，但没有任何答案。

这只是最近才开始发生在我的机器上。起初我以为这是因为防病毒软件或防火墙的原因，但禁用它们并没有什么好处。我什至不知道是什么导致页面无法加载。

我的webpack.mix.js文件如下所示：

mix.js('resources/assets/js/script.js', 'public/js')
.sass('resources/assets/sass/main.scss', 'public/css')
.disableNotifications()
.browserSync();

编辑：任何有关缩小问题范围的提示也将不胜感激。

当我单击锚标记时，它会将我带到 /null 并显示此错误：

拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“default-src 'self'”。启用内联执行需要“unsafe-inline”关键字、哈希值（“sha256-KpHv3zgivMSB4dPnfYfqMt2lBibsYvM36EdoBBAsfbM=”）或随机数（“nonce-...”）。另请注意，“script-src”未明确设置，因此“default-src”用作后备。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body><script id="__bs_script__">//<![CDATA[
    document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.26.3'><\/script>".replace("HOST", location.hostname));
//]]></script>

<pre>Cannot GET /block-examples/null</pre>
</body>
</html>

我尝试为 CSP 添加元标记，但没有成功。

我只是想知道是否可以像这样在 gulp.series 中传递函数参数gulp.series(scripts(arg), reload)而不获取AssertionError [ERR_ASSERTION]: Task never defined: [object Object].

完整的目标代码如下：

//required imports\nconst watch = () => {\n    const backendWatcher = gulp.watch(\'./*.js\');\n    backendWatcher.on(\'change\', (path,stats) => {\n        log(path,stats);\n        gulp.series(scripts(path), reload)//error occurs here(line 20)\n        log("passed :D");\n    });\n}\n\nfunction scripts(file) {\n    if(!file) return false, log("no file found");\n    return gulp.src(`./${file}`)\n        .pipe(browserify())\n        .pipe(uglify())\n        .pipe(gulp.dest(\'./dist\'));\n}\n\nfunction reload(done) {\n    browserSync.reload();\n    done();\n}\n\nfunction serve(done) {\n    browserSync.init({\n        server: {\n            baseDir: \'./\',\n            index: "/index.html"\n        }\n    });\n    done();\n}\n\nconst dev = gulp.series(serve, watch);\nexports.dev = dev;\nexports.scripts = scripts;\nexports.reload = reload;\n …

• laravel-mix@4.1.4
• 节点 v12.16.2
• NPM v6.14.4
• 操作系统：Laravel Homestead

描述：

每当我更新视图、控制器、模型等时，运行 npm run watch 就像一种魅力。它会自动刷新并节省时间。但是，对于 .vue 文件，则是另一回事。我正在更新我的组件，浏览器检测到更改并重新加载。但不是使用更新后的代码，就像它的缓存或更改后不编译 app.js 一样。

当我从“npm run watch”中“ctrl+c”退出并再次运行时。它显示了更新的代码。问题是每次我做更新。我必须运行“npm run watch”或“npm run dev”。

我今天花了几个小时，浏览教程并对 webpack.mix.js 文件进行更改。我现在撞到了一堵砖墙......

我的 webpack.mix.js 文件

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .extract(['vue'])
    .sourceMaps()
    .sass('resources/sass/app.scss', 'public/css')
    .browserSync({
    host: '192.168.10.10',
    proxy: 'mywebsite.test',
    open: false,
    injectChanges: true,
    logSnippet: true,
    watchOptions: {
        usePolling: true,
        interval: 500,
        poll: true,
        ignored: /node_modules/
    },
    files: [
        'app/**/*.php',
        'resources/views/**/*.php',
        'resources/js/app.js',
        'resources/js/components/*.vue',
        'packages/mixdinternet/frontend/src/**/*.php',
        'public/js/**/*.js',
        'public/css/**/*.css'
    ]
});

浏览器同步

DONE  Compiled successfully in 7276ms                                                                        4:05:50 …