标签: browser-sync

我最近从Express Web应用程序迁移到了nodejs 的BrowserSync应用程序.使用Express,如果我想设置一个cookie,我的配置看起来像这样:

var express = require('express');
var session = require('express-session');
var finalhandler = require('finalhandler');
var serveStatic = require('serve-static'),
    serve = serveStatic(__dirname);

var app = express();
app.use(session({  // see https://github.com/expressjs/session
    secret: 'keyboard cat',
    resave: false,
    saveUninitialized: false
  }))
  .use(function(req, res, next) {
    res.cookie('myCookie', 'my cookie value');
    var done = finalhandler(req, res);
    serve(req, res, done);
  });
app.listen(8080);

我的团队已经开始使用BrowserSync(通过gulp任务),到目前为止,我的配置看起来像这样:

var gulp = require('gulp'),
    browserSync = require('browser-sync'),
    gulpLoadPlugins = require('gulp-load-plugins'),
    plugins = gulpLoadPlugins();

gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: …

首先,我正在关注Menno Pietersen关于Rapid MODx Workflow的教程.我非常肯定我已经准确地遵循了它,但出于某些原因,当我在项目文件夹中"gulp watch"时,我得到一个空白的本地主机:3000页显示"无法获取/".

我对这里的所有移动部件并不熟悉,所以我不知道从哪里开始为什么我得到这个错误而不是看到我的网站.我用谷歌搜索了它并提出了其他各种与我的设置和/或使用的工具无关的东西......而且我试着在我身边逛逛并弄清楚它,但我只是在旋转我的轮子在此刻.

有没有其他人尝试过此设置并遇到了这个？或者可能知道我应该从哪里开始？

我很感激帮助.如果需要,我可以提供进一步的信息.谢谢.

注意:如果我在项目根目录中放入一个index.html文件,那么它会显示,但我不确定为什么它没有显示modx网站或如何修复它所以它确实如此.

更新:我发现在我的gulpfile.js中,gulp.task浏览器同步被设置为使用'baseDir'..我注释掉并使用了代理选项并将其设置为'localhost'.固定.

我已经看了一下文档,但是对于什么值是可以接受的,它有点薄.有没有人知道是否有价值打开谷歌浏览器隐身和/或有一个完整的列表(谁知道我可能希望有一天在IE/Edge中打开一个项目).

我试过了:

• 浏览器:"google chrome -incognito"
• 浏览器:" - enognito"
• 浏览器:"隐身"

我估计,没有更多的选择.

提前致谢!

还有一个问题是打开的,同一个标题已被关闭但我的错误无法使用该问题中给出的解决方案解决.

• Mac OSX El Capitan
• 节点[v5.6.0]
• Npm [v3.6.0]

我使用以下方法成功安装了Browser-Sync: bash $ sudo npm install -g browser-sync

但是当我通过输入以下内容检查浏览器同步版本时: bash $ browser-sync --version

我收到此错误: bash -bash: browser-sync: command not found

见下文.我使用当前代码时遇到的问题是Sourcemaps没有通过Browsersync注入.我在这里错过了什么或做错了吗？

供参考:https: //www.browsersync.io/docs/gulp/#gulp-sass-maps

// requirements
var gulp         = require('gulp');
var sass         = require('gulp-ruby-sass');
var browserSync  = require('browser-sync').create();
var prefix       = require('gulp-autoprefixer');
var rename       = require('gulp-rename');
var sourcemaps   = require('gulp-sourcemaps');
var cssclean     = require('gulp-clean-css');

// create sass tasks
gulp.task('sass', function() {
  return sass('assets/scss/style.scss', {sourcemap: true, style: 'compact'})
    .on('error', function (err) {
        console.error('Error!', err.message);
    })
    .pipe(rename({suffix: '.min'}))
    .pipe(cssclean())
    .pipe(prefix("last 2 versions", "> 1%", "ie 8", "Android 2", "Firefox ESR"))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('assets/styles'))
    .pipe(browserSync.stream({match: '**/*.css'}))
});

gulp.task('serve', ['sass'], function() {

  browserSync.init({
    proxy: …

我一直在搜索,但是当使用Gulp的BrowserSync和localhost测试环境时,没有帖子指出要避免使用的信息.所以这是这篇文章.

我正在使用gulp browser-sync,用MAMP进行测试.现在我无法让我的浏览器同步手表工作.每当我保存文件时,我都想重新加载浏览器.

在MAMP设置下,

1. Apache端口:80
2. Nginx端口:80
3. MySQL端口:3306

gulpfile.js

var gulp = require('gulp');
var browserSync = require('browser-sync'); // create a browser sync instance.

//tasks for development
// Start browserSync server
gulp.task('browserSync', function() {
  browserSync({
    server: {
        baseDir: "app"
    },
    proxy: "localhost:8080" // can be [virtual host, sub-directory, localhost with port]
});

gulp.task('watch', ['browserSync'], function () {
  gulp.watch('app/*.{php,css,js}', browserSync.reload);
});

既然我们在这里谈论MAMP,我的目录是在htdocs/test中,如下所示:

另外,我的index.php文件在/ app中

我想我在很多层面都犯了错误,但是现在我的解决方案的任何组合似乎都没有帮助,而且我花了好几个小时就这么做了.有什么建议？

所以它是2017年,在编码网站时,我们仍然需要编辑,保存,切换窗口,然后点击刷新.做一个小改动,然后重新做一遍.然后再次.再等等

我错过了什么,因为现在肯定有一个解决方案,浏览器可以在我们输入时自动更新,或者至少在我们点击保存时立即更新？

jsbin.com是我在本地Apache(Windows 10)设置中寻找的完美工作示例.我尝试过各种各样的方法,包括LiveReload和LiveJS,但它们太冗长了,通常会有大约2-4秒的延迟,这在构建网站时不够快.它们还需要在每个需要监控的页面中插入浏览器扩展或一段代码.这一切看起来都非常"hacky",非常1990年代.

我很好奇其他开发人员如何处理这个问题？现在有一个我没有遇到的NodeJS解决方案,还是其他人只是在做编辑,保存,切换,刷新方法？当然不是吗？作为参考,我使用Atom编辑我的html/css/js文件等,然后保存并查看Chrome中的更改.任何想法或想法将不胜感激.实际上非常感激.

我在Bash中使用浏览器同步,它不会自动打开浏览器并[BS] Couldn't open browser (if you are using BrowserSync in a headless environment, you might want to set the open option to false)在我输入npm startAngular示例时说.

当然,没有选择在有限的Linux环境中打开浏览器(因为在Windows上的Ubuntu上没有在Bash中提供GUI支持).

如果我使用Powershell,它的工作正常.

我的环境:Windows上的Ubuntu上的VS Code + Bash.

但是有配置或解决方法吗？

我正在使用JS,HTML,CSS创建项目,我正在尝试使我的工作流程更快更容易,因此我决定安装浏览器同步以帮助在编码过程中自动重新加载页面.这将是一个很好的解决方案,但浏览器同步后不断重新加载我的页面30-60秒,这是令人讨厌的,因为在调试期间我改变了谷歌Chrome开发工具,如CSS属性,浏览器重新加载和更改的东西.这就是我开始浏览器同步的方式

browser-sync start --server --files . 

这是我的bs-config.js

module.exports = {
"ui": {
    "port": 3001,
    "weinre": {
        "port": 8080
    }
},
"files": ["./css/*.css", "./scripts/*.js", "./*.html"],
"watchEvents": [
    "change"
],
"watchOptions": {
    "ignoreInitial": false
},
"server": false,
"proxy": false,
"port": 3000,
"middleware": false,
"serveStatic": [],
"ghostMode": {
    "clicks": true,
    "scroll": true,
    "location": true,
    "forms": {
        "submit": true,
        "inputs": true,
        "toggles": true
    }
},
"logLevel": "info",
"logPrefix": "Browsersync",
"logConnections": false,
"logFileChanges": true,
"logSnippet": true,
"rewriteRules": [],
"open": "local",
"browser": "default",
"cors": false,
"xip": …

当我运行Gulp时,UI页面可以在http:// localhost:3001上运行,但是在http:// localhost:3000上,浏览器会提供一个空白页面,它会加载,没有控制台错误.

我在Windows 10,Gulp版本3.9.1,BrowserSync版本2.24.4上使用WAMP.

这个设置工作正常,直到最近,这让我很难过.

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var uglify = require('gulp-uglify');
var rename = require("gulp-rename");
var sourcemaps = require('gulp-sourcemaps');
var browserSync = require('browser-sync').create();

gulp.task('sass', function(){
  return gulp.src('sass/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
    .pipe(autoprefixer('last 2 versions'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('css'))
    .pipe(browserSync.stream());
});

gulp.task('compress', function () {
  gulp.src('scripts/js/*.js')
    .pipe(sourcemaps.init())
    .pipe(uglify())
    .pipe(sourcemaps.write())
    .pipe(rename({ suffix: '-min' }))
    .pipe(gulp.dest('scripts/minified/'));
});

gulp.task('browserSync', function() {
    browserSync.init({
        proxy: "experiments"
    });
});

gulp.task('watch',['browserSync', 'sass', 'compress'], function(){ …