标签: browser-sync

我知道 SO 和 GitHub 上有很多类似的问题，但没有一个适合我的情况。

我需要一个项目来使用 gulp + browsersync 和 apache vhost（使用 MAMP PRO 5.5 创建）。

Gulp 正在工作（它完成了我需要的所有任务）。Browsersync 已设置，但它在与 MAMP 使用的端口不同的端口上打开我的网站。我已经使用默认端口和 Mamp 默认端口进行了测试。Browsersync 仍然使用正确的 url 但不正确的端口打开网站。

我知道我不能使用相同的端口，但如何设置 Browsersync ？

这是我的吞咽相关部分：

gulp.task('browser-sync', ['sass', 'scripts'], function () {
    browserSync.init({
        open: 'external',
        host: 'my-domain.dev',
        proxy: 'my-domain.dev',
        https: {
            key: "/Users/path-to-custom-certificate/my-domain.dev.key",
            cert: "/Users/path-to-custom-certificate/my-domain.dev.crt"
        },
        //port: 443, // If I try same port as MAMP, Browsersync increments this port ex 444
        browser: "google chrome"

    });
});

也许可以在 APACHE 中配置一些东西？

我正在尝试从 Browsersync（使用 webpack）中的 url 中删除端口号。

new BrowserSyncPlugin({
    host: 'test.local',
    proxy: 'https://test.local',
    open: 'external',
    files: ['**/*.css', '**/*.php'],
    port: 80,
}),

此配置打开https://test.local:81

当我删除端口参数时，它会打开https://test.local:3000

无论如何，它会在 url 末尾添加端口号。没有端口号可以吗？像这样https://test.local

上周我尝试从头开始为一个小型 javascript 项目编写 gulpfile。我选择使用 BrowserSync 来编译我的代码并重新加载浏览器 (Chrome)。整个周末都运行良好，我完成了。然而，我觉得我昨天打开了这个项目，现在当我运行 'gulp' 命令时，它没有连接到浏览器，给出“已连接到 BrowserSync”消息，并提供自动重新加载功能。但是在控制台中，我仍然收到通知，我的文件正在更新和编译。

有谁知道这怎么可能发生？

这是我正在使用的 gulpfile：

var gulp = require('gulp'),
gutil = require('gulp-util'),
browserSync = require('browser-sync'),
reload = browserSync.reload,
jshint = require('gulp-jshint'),
sass = require('gulp-sass');

gulp.task('browser-sync', function() {
  var files = [
    'app/**/*/.html',
    'app/assets/css/**/*.css',
    'app/assets/js/**/*.js'
    ];

  browserSync.init(files, {
    server: {
      baseDir: './app'
    }
  });
});

// process JS files and reload all browsers when complete.
gulp.task('js', function () {
    return gulp.src('app/assets/js/*js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(gulp.dest('app/assets/js'))
        .pipe(browserSync.reload({stream:true}));
});

gulp.task('sass', function() {
  return gulp.src('app/assets/sass/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('app/assets/css')) …

出于某种原因,无论我尝试什么,当使用BrowserSync通过Gulp启动服务器时,Google Chrome似乎永远无法显示http:// localhost:3000(或任何其他指定的端口号).

导航到Firefox中的相同URI,表明它可以工作并且BrowserSync已连接.

gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: './'
        },
        port: 8080
    });
});

我将8080上面的端口指定为替代,但即使使用默认设置3000也无法在Chrome中使用.Firefox似乎也可以使用它们.

我去过:chrome:// net-internals/#dns并清除主机缓存,重启等等.没有任何作用.

在Chrome中,我只是收到消息: ERR_CONNECTION_REFUSED

有任何想法吗？谢谢.

PS - 也适用于Safari.

所以我是gulp的新手并且一直在关注文档.到目前为止,一切都运行良好,直到我进入浏览器同步.如果我跑了一口气,一切都会转移到需要去的地方.浏览器在端口3000上加载index.html文件.没有加载任何css或js.在控制台中,我得到了"无法加载资源"404错误,除了图像和cdn文件之外,还有src或href属性.我所拥有的大多数浏览器同步内容都直接来自http://www.browsersync.io/docs/gulp/.这是我的gulpfile:

///////////////////////////////////////
// Required
///////////////////////////////////////
var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    minifyCss = require('gulp-minify-css'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    plumber = require('gulp-plumber'),
    browserSync = require('browser-sync'),
    reload = browserSync.reload,
    sourcemaps = require('gulp-sourcemaps'),
    sass = require('gulp-sass');

///////////////////////////////////////
// Required
///////////////////////////////////////
gulp.task('userJs', function () {
    return gulp.src('js/*.js')
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(uglify())
        .pipe(concat('app.js'))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('dist/js'))
        .pipe(browserSync.stream());
});

gulp.task('libJs', function () {
    return gulp.src('js/libs/*.js')
        .pipe(gulp.dest('dist/js/libs'))
        .pipe(reload({stream:true}));
});    

gulp.task('sass', function () {
    return gulp.src('scss/*.scss')
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(minifyCss())
        .pipe(concat('app.css'))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('dist/css'))
        .pipe(browserSync.stream());
}); …

我正处于我的Gulp使用的一个阶段,它开始有意义地将任务分解为单独的文件.

为此,我希望使用gulp-load-plugins,但是虽然我的任务运行,但浏览器同步似乎不会触发/执行任何操作.

这是我的剥离设置.不知道我哪里错了!

gulpfile.js

var gulp = require('gulp'),
    plugins = require('gulp-load-plugins')();

function getTask(task) {
    return require('./gulp/tasks/' + task)(gulp, plugins);
}

gulp.task('browser-sync', getTask('browser-sync'));
gulp.task('bs-reload', getTask('bs-reload'));
gulp.task('scripts', getTask('scripts'));

gulp.task('default', ['browser-sync'], function(){
    gulp.watch('src/js/**/*.js', ['scripts']);
});

scripts.js(Gulp任务)

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

module.exports = function(gulp, plugins) {

    return function() {

        return gulp.src([
            'src/js/plugins/**', 
            'src/js/app.js', 
            '!src/js/{libraries,libraries/**}'
        ])
        .pipe(plugins.plumber({
            errorHandler: function(error) {
            console.log(error.message);
            this.emit('end');
        }}))
        .pipe(plugins.concat('app.js'))
        .pipe(gulp.dest('dist/js/'))
        .pipe(plugins.rename({
            suffix: '.min'
        }))
        .pipe(plugins.uglify({
            preserveComments: 'none'
            //preserveComments: 'some'
        }))
        .pipe(gulp.dest('dist/js/')) // Seems okay up until here...
        .pipe(browserSync.reload({ …

问题是我的index.html不会从姐妹文件夹加载css文件.我尝试了各种Browsersync选项,但都没有.

进入我的第二天试图解决这个问题.我正在使用Flask框架中的Python,它的工作方式类似于Laravel等.我的任务管理器是Gulp,前端框架是Foundation 6.我是Flask和Gulp的新手.几年前我曾经和Laravel一起使用Grunt和Livereload,然后scss和浏览器重新加载.内存消失了.

我的文件结构应该是典型的Flask,只是这里的相关文件夹:

-root
    -app
        -static
             -css
             -js
        -templates  (html files)
    -foundation  (scss files and framework)

Browsersync似乎是设计的,所以你必须在html文件下有css.我已经在/ root和/ app文件夹中使用index.html进行了测试,但它确实有效.但是,我需要/想要/ templates中的html.

在/app/templates/index.html中:

<link rel="stylesheet" href="../static/css/app.css">

我在根和/基础中使用Browsersync和Gulp.js文件的命令行.

如果我使用"app/templates"设置它,那么Browsersync服务器将从/ templates提供html,但它无法找到css.如果我将/ static/css移动到/ templates中,则在浏览器中很好地呈现正确的index.html文件.所以Browsersync适用于旧的预应用框架布局.它只是无法处理姐妹文件夹的路径.

gulp.task('serve', ['scss'], function() {
browserSync({
    server: "app"
});

gulp.watch(src.css, ['scss']);
gulp.watch(src.html).on('change', reload);
});

我考虑过他们的代理选项,但到目前为止还找不到解决方案.我没有在网上找到很多设置示例,没有一个是有用的.

现在我只是使用Foundation 6对应用程序的html页面进行桌面布局,并且没有设置开发服务器,只是我的MBP上的一个文件夹.

有任何想法吗？请 :-)

如何使用gulp Browser-sync查看手机中的本地开发网站？我在手机浏览器中键入localhost:3000,但不会加载

第一次使用gulp,我正在关注一些似乎不适合我的教程.我有一个真正的基础项目,我只想学习如何使用gulp进行标准的事情,如js/css缩小,图像缩小和浏览器同步.

当我使用browserSync运行我的监视任务时,它会转到localhost:8000的右侧URL,但它显示"无法获取/"而不是呈现我的页面.我如何解决这个问题,以便我可以将browserSync与Django一起使用？

文件目录:

gulpfile:

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

gulp.task('sass', function() {
  return gulp.src('polls/static/polls/scss/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('polls/static/polls/css'))
    .pipe(browserSync.reload({
      stream: true
    }))
});

gulp.task('browserSync', function() {
  browserSync.init({
    server: "mysite",
    port: 8000
  });
});

gulp.task('watch', ['browserSync', 'sass'], function() {
  gulp.watch('polls/static/polls/scss/**/*.scss', ['sass']);
})

在BrowserSync中,如何匹配特定路由并重定向？换句话说,如果用户输入的路径

http:// localhost:8080/src/public/App1/Dashboard 我想重定向到: http:// localhost:8080/src/public/index.html#/ App1/Dashboard

这是我目前的配置

gulp.task('x_open_server_development_auto', ['x_watch_source'], function () {
    process.stdout.write('Starting browserSync and superstatic...\n');
    browserSync({
        port: 8080,
        open: false,
        files: ['index.html', '**/*.ts'],
        notify: true,
        reloadDebounce: 400,
        server: {
            baseDir: './',
            directory: true
        }
    });
    // exit every 20 minutes so forever will restart it
    setTimeout(function () {
        process.exit()
    }, 3200000);
});

tx肖恩