标签: browser-sync

我正在尝试使用 Elixir BrowserSync，这是 Laravel 的最新功能之一。

我将它添加到 gulp 文件中

elixir(function(mix) {
    mix.sass('app.scss')
    .browserSync();
});

当我运行“gulp watch”时，它会输出此消息

[20:49:20] Using gulpfile ~/Desktop/laravel/gulpfile.js
[20:49:20] Starting 'watch'...
[20:49:20] Finished 'watch' after 11 ms
[BS] Proxying: http://homestead.app
[BS] Access URLs:
----------------------------------
Local: http://localhost:3000
External: http://10.9.0.48:3000

使用 url http://localhost:3000自动启动浏览器但没有加载任何内容。

我认为问题与此行有关：[BS] 代理：http : //homestead.app

我希望能够将 browserSync 外部 URL 作为我的 gulp 文件中的外部节点脚本的参数发送。如何通过 browserSync 对象（或其他方式）获取该外部 URL？

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

gulp.task('default', ['browser-sync', 'config']);

gulp.task('browser-sync', function() {
    browserSync.init({
        proxy: "localhost:8024",
        open: "external"
    });
});

gulp.task('config', shell.task([
    "node scripts/someNodeScript.js browserSync.externalURL"
]));

更新

基于下面 @sven-shoenung 的出色回答，我稍微调整了他的解决方案并成功使用了这个：

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

var externalUrl;

var browserSyncDone = function () {
    spawn('node', ['scripts/someNodeScript.js', externalUrl], {stdio:'inherit'});
};

gulp.task('default', ['browser-sync']);

gulp.task('browser-sync', function() {
    browserSync.init({
        proxy: "localhost:8024",
        open: "external" …

我正在设置一个 package.json 文件，该文件将启动 Nodemon、运行我的 watch css 命令并使用“npm start”命令运行浏览器同步。

这适用于我工作时的 Mac 计算机，但不适用于我家中的 Windows 计算机。

在我的 Mac 上，它将监听服务器和 SCSS 文件的任何更改，并运行浏览器同步。

在 Windows 上，它仅运行 Nodemon 并等待任何服务器更改。看起来它忽略了我的其他两个命令。

我需要为 Windows 做一些不同的事情吗？理想情况下，我希望代码能够在两个平台上通用。

Nodemon 似乎是这里的问题，因为 watch-css css 和 browsersync 可以工作，但 nodemon 之后的任何内容都不起作用。

"scripts": {
  "build-css": "node-sass --output-style compressed --source-map true -o public/css scss",
  "watch-css": "nodemon -e scss -x \"npm run build-css\"",
  "build-js": "browserify js/app.js -o public/js/app.js",
  "browser-sync": "browser-sync start --port 4000 --proxy 'localhost:3000' --files 'views/*' 'public/**/*' --no-notify",
  "start": "nodemon ./bin/www & npm run watch-css & npm run …

我想使用BrowserSync启动我的NodeJS应用程序,但它似乎无法正常工作.

错误消息:错误:听EADDRINUSE

编辑#1:

我找到了解决问题的方法.

gulp.task('sync', ['start', 'watch'], function(cb) {
    browserSync.init({
        files: ['**/*'],
        proxy: 'http://localhost:3000',
        port: 4000
    });
});

gulp.task('start', function() {
    var called = false;
    return nodemon({
        script: './bin/www',
        watch: ['Application.js']
    }).on('start', function onStart() {
        if (!called) {
            cb();
        }
        called = true;
    }).on('restart', function onRestart() {
        setTimeout(function reload() {
            browserSync.reload({
                stream: false
            });
        }, 500);
    });
});

我是一个新人,我曾经和咕噜咕噜一起工作,现在我有一些麻烦.

其中最重要的是自动CSS注入,这不是woking,经过很长一段时间后我不知道为什么.谁能帮我？并且还给我一些关于我的配置的建议？提前致谢!

'use strict';

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    csso = require('gulp-csso'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    clean = require('gulp-clean'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    sourcemaps = require('gulp-sourcemaps'),
    livereload = require('gulp-livereload'),
    lr = require('tiny-lr'),
    server = lr();


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

gulp.task('vendors', function() {
  return gulp.src('./assets/js/vendors/*.js')
    .pipe(concat('vendors.js'))
    .pipe(gulp.dest('./assets/js/'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest('./assets/js/'))
    .pipe(browserSync.stream())
    .pipe(notify({ message: 'Vendors task complete' …

我正在使用Netbeans,我正在使用spring boot开发我的第一个Web应用程序.我将我的htmls,js,css保存在"webapp"文件夹中,然后我重构了我的项目,并将所有静态内容放在/ resources/static中.从那时起,我每次都必须重建我的项目,因为静态内容没有重新加载.

如果我将为Gulp使用浏览器同步插件,我可以轻松绕过这个问题吗？

我为本地项目设置了 Broswersync，但是当我尝试访问同一网络上其他设备上的外部 URL 时，我得到某种形式的

该网站花费的时间太长

消息（取决于浏览器）。我怀疑这是一些网络设置，但不知道从哪里开始寻找。

如何更改配置以使用精简服务器“browserSync”（如“about.html”）而不是默认的“index.html”加载自定义文件？

我正在尝试设置BrowserSync以处理我的Laravel项目。但是，当我运行时npm run watch，localhost:3000不会加载。我在终端中没有收到任何编译错误。有趣的是，UI 仪表板localhost:3001运行良好。

如果我运行php artisan serve，localhost:8000加载正常，但当然，它与BrowserSync.

我的webpack.mix.js文件看起来像这样：

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

mix.browserSync({proxy:'localhost:3000'});

我正在使用以下版本：

Laravel-Mix: 4.0.7

browser-sync: 2.26.7

webpack-dev-server: 3.8.0

browser-sync-webpack-plugin: 2.0.1

有什么想法吗？

我使用 DDEV 作为我的本地托管环境，我的许多项目都通过 Gulp 实现了前端自动化。Browsersync是我们前端设置的主要组件，它要求 DDEV 容器将端口暴露给主机。手头的问题有两个方面，从容器向主机公开端口的最佳方法是什么，以及在 DDEV 环境中浏览器同步 Gulp 任务的最佳设置是什么？

我正在尝试弄清楚如何结合使用浏览器同步和gulp,以及让浏览器在编译后自动更新较少文件中的更改.我现在得到的是导致系统中出现重新加载的消息"连接到浏览器同步",但我没有看到浏览器发生更改.在禁用缓存的完整手动重新加载中,我看到了预期的更改,因此css/less任务似乎部分工作但我在浏览器同步时遗漏了一些东西.

哦,我在一个主.less文件中使用@import语句来为每个单独的模块提供更少的文件.感谢您的时间和帮助!

gulp.task('less', function(){
return gulp.src(basepath + 'styles/emma.less')
    .pipe(plumber())
    .pipe(sourcemaps.init())
        .pipe(less())
        .pipe(autoprefixer({
            browsers: ['last 2 versions']
        }))
        .pipe(minifyCSS())
    .pipe(sourcemaps.write('./'))
    .pipe(filesize())
    .pipe(gulp.dest( paths.dest + '/css' ))
    .pipe(reload({stream: true}));
});
gulp.task('browser-sync', function() {
    browserSync({
        proxy: 'localhost:8080'
    });
});    
//dev task to compile things on the fly
gulp.task('dev', ['browser-sync'], function(){
    gulp.watch(paths.scripts, ['scripts']);
    gulp.watch(paths.less, ['less']);
    gulp.watch(paths.templates, ['templates']);
});

Browsersync只是重新加载index.html,即使我有我的基础设置,甚至文件选项上列出的特定文件.

我已查看他们的文档,但我有他们说的所有内容,仍然只刷新或同步index.hrml,但about.html例如没有.

我的结构是这样的:

-booming-gaes-web
  -dist
  -node_modules
  -src
    -index.html
    -about.html
  -gulpfile.js

所以我的html文件在我的src文件夹上是直接的,并且gulp文件与src文件夹在同一个文件夹中.

我的gulp档案:

// Include gulp
var gulp = require('gulp');
// Include  Plugins

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


// Watch Files For Changes
gulp.task('watch', function() {
    gulp.watch('src/js/*.js', ['js-watch']);
    gulp.watch('src/css/*.scss', ['sass-watch']);
    gulp.watch('src/css/*.css', ['prefix']);
    gulp.watch('src/*.html').on('change', browserSync.reload);
    browserSync({
      files: ['src/index.html','about.html'],
      server:{
        baseDir:'src',
        directory: true
      }
    });
});

我做错了什么想法？谢谢!

我已经使用包控制为 Sublime Text 3 安装了浏览器同步插件，但是当我启动该插件时，它会默认打开 Chrome 浏览器（对于 Sublime Text 3 和操作系统，我将 Firefox 作为默认浏览器）。

如何配置插件默认打开 Firefox 而不是 Chrome？