标签: browser-sync

我正在使用带有webpack-dev-server的Browser Sync，并且在使用浏览器同步时遇到了问题。只有表格填写有效，单击，滚动在浏览器同步中不起作用，并且没有发生任何编译时错误，但是以上这些都不起作用..！这是我的“ Webpack.dev.js”文件，那么这里有什么问题呢？

const helpers = require('./helpers');
const buildUtils = require('./build-utils');
const webpackMerge = require('webpack-merge'); 
const commonConfig = require('./webpack.common.js');

const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
const NamedModulesPlugin = require('webpack/lib/NamedModulesPlugin');
const EvalSourceMapDevToolPlugin = require('webpack/lib/EvalSourceMapDevToolPlugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');

module.exports = function (options) {
  const ENV = process.env.ENV = process.env.NODE_ENV = 'development';
  const HOST = process.env.HOST || 'localhost';
  const PORT = process.env.PORT || 3000;

  const METADATA = Object.assign({}, buildUtils.DEFAULT_METADATA, {
    host: HOST,
    port: PORT,
    ENV: ENV,
    HMR: helpers.hasProcessFlag('hot'),
    PUBLIC: process.env.PUBLIC_DEV || HOST + ':' …

我正在使用Grunt的BrowserSync任务,这个任务将我的本地项目启动到url"localhost:3000".

这很好用.但是当我在智能手机中使用外部网址(http://192.168.1.129:3000)时,我的浏览器Chrome在Android中出现以下错误:

ERR_ADDRESS_UNREACHABLE

我不明白这个问题.你可以在这里看到我的Gruntfile.js:

//Gruntfile.js
module.exports = function (grunt) {
  grunt.initConfig({

    //Watch task config
    watch: {

    },
    //BrowserSync
    browserSync: {
      default_options: {
        bsFiles: {
          src: [
            "css/*.css",
            "js/*.js",
            "*.html"
          ]
        },
        options: {
          watchTask: true,
          proxy: "tutorialmaterialize.dev"
          }
        }
      }

    });

  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-browser-sync');

 //Default task
 grunt.registerTask('default', ['browserSync', 'watch']);
};

我怎么能解决这个问题？非常感谢你.

我正在经历Angular 2的5分钟快速启动.但是,我的应用程序驻留在src/文件夹而不是我的存储库的根目录,当我运行npm start应用程序时,尝试index.html在根目录中查找文件.我在读了lite-server和文档显示,它使用BrowserSync我可以重新BrowserSync用bs-config.json在我的仓库.我这样做了,这就是我的配置:

{
  "port": 8123,
  "server": { "baseDir": "./src" }
}

根据日志,它使用指定的配置:

[1] > todo-app-angular2@1.0.0 lite E:\GitHub\todo-app-angular2
[1] > lite-server "./bs-config.json"

我还尝试通过bs-config.js覆盖

module.exports = {
  port: 8123,
  server: {
    baseDir: "./src"
  }
};

但是,Angular应用程序仍然在端口3000上打开,而忽略了配置中定义的baseDir.我究竟做错了什么？

我有这个gulpfile.js文件:

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

gulp.task('sass', function() {
    gulp.src('assets/src/sass/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('assets/dist/css'))
    .pipe(browserSync.stream());
});

gulp.task('scripts', function() {
    gulp.src('assets/src/js/*.js')
    .pipe(concat('main.js'))
    .pipe(uglify())
    .pipe(gulp.dest('assets/dist/js'));
}); 

gulp.task('server', ['sass','scripts'], function() {
    browserSync.init({
        proxy: 'http://localhost/example/',
    });
    gulp.watch('assets/src/sass/*.scss', ['sass']);
    gulp.watch('assets/src/js/*.js', ['scripts']);
    gulp.watch('./**/*.php').on('change', browserSync.reload);
});

gulp.task('server', ['run']);

请告诉我有什么区别:

.pipe(browserSync.stream());

和:

gulp.watch('./**/*.php').on('change', browserSync.reload);

我需要他们两个？他们有不同的角色？

谢谢.

我的配置完成了它应该做的一切,但它永远不会刷新浏览器.一旦我手动刷新它,就会有变化.我正在连接到默认的localhost:3000.任何想法为什么会这样或如何调试它？

gulpfile.js:

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

gulp.task('html', function () {
    browserSync.reload();
});

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

gulp.task('serve', function() {
  browserSync({
    server: {
      baseDir: 'app'
    }
  });
});

gulp.task('default', ['serve'], function () {
    gulp.watch('./app/scss/*.scss', ['sass', browserSync.reload]);
    gulp.watch('./app/*.html', ['html', browserSync.reload]);

});

控制台输出的示例:

[BS] Local URL: http://localhost:3000
[BS] External URL: http://192.168.1.3:3000
[BS] Serving files from: app
[17:10:32] Starting 'html'...
[BS] Reloading Browsers...
[17:10:32] Finished …

我的主要目标是调整Yeoman的gulp-webapp开发工作流程来运行PHP.

具体而言,我希望能够使用gulp-php-connect与多个基目录(从萨斯编译CSS)和途径(对鲍尔的依赖),如果这甚至有可能.

我可以使用gulp-connect-php插件使用Gulp运行PHP ,如下所示:

gulp.task('connect-php', function() {
  connectPHP.server({
    hostname: '0.0.0.0',
    bin: '/Applications/MAMP/bin/php/php5.5.3/bin/php',
    ini: '/Applications/MAMP/bin/php/php5.5.3/conf/php.ini',
    port: 8000,
    base: 'dev'
  });
});

但是,我想利用gulp-webapp优秀但非常纠结的开发工作流架构,它依赖于BrowserSync,Sass编译器(将.css文件编译成.tmp文件夹,用于开发),自动前缀和使用了一堆其他有用的插件.

以下是我想要适应的部分gulp-connect-php或任何其他PHP:

gulp.task('serve',  ['styles'],function () {
  browserSync({
    notify: false,
    port: 9000,
    server: {
      baseDir: ['.tmp', 'app'],
      routes: {
        '/bower_components': 'bower_components'
      }
    }
  });

  // watch for changes
  gulp.watch([
    'app/*.html',
    '.tmp/styles/**/*.css',
    'app/scripts/**/*.js',
    'app/images/**/*'
  ]).on('change', reload);

  gulp.watch('app/styles/**/*.scss', ['styles', reload]);
  gulp.watch('bower.json', ['wiredep', 'fonts', reload]);
});

BrowserSync有一个代理选项,允许我用gulp-connect-php服务器运行它,这是非常了不起的.但是我需要gulp-connect-php使用多个基本目录和路由,比如BrowserSync …

我已经用npm安装了浏览器同步.在他们的网站上,他们提到它还允许远程调试.但他们没有提到如何进行远程调试.我使用下面的命令在浏览器同步上运行mysite.browser-sync start --proxy localhost:8080/mysite

我怎么能远程调试呢？

我正在运行Express服务器并使用browserSync来监视更改.当我跑步时npm start,它会启动一个运行的gulp任务:

// Server task
gulp.task('server', function(cb) {

  // We use this `called` variable to make sure
  // the callback is only executed once
  var called = false;

  return nodemon({
    script: 'server.js',
    watch: ['server.js', 'app/**/*.js', 'config/**/*.js']
  })
  .on('start', function onStart() {
    if (!called) {
      cb();
    }
    called = true;
  })
  .on('restart', function onRestart() {

    // Also reload the browsers after a slight delay
    setTimeout(function reload() {
      browserSync.reload({
        stream: false
      });
    }, 500);
  });
});

// BrowserSync
gulp.task('browser-sync', ['server'], …

我正在学习前端构建系统目前gulp,我想使用brower-sync,问题是它不会在commad行中引发错误,而是当它调出浏览器时它不会显示我的html文件而它会在浏览器窗口中说"无法获取/"错误.这是我的gulpfile.js代码

var gulp = require('gulp'),
   uglify = require('gulp-uglify'),
   compass= require('gulp-compass'),
   plumber = require('gulp-plumber'),
   autoprefixer = require('gulp-autoprefixer'),
   browserSync = require('browser-sync'),
   reload = browserSync.reload,
   rename = require('gulp-rename');


gulp.task('scripts', function() {
   gulp.src(['public/src/js/**/*.js', '!public/src/js/**/*.min.js'])
      .pipe(plumber())
      .pipe(rename({suffix: '.min'}))
      .pipe(uglify())
      .pipe(gulp.dest('public/src/js/'));
});

gulp.task('styles', function() {
   gulp.src('public/src/scss/main.scss')
      .pipe(plumber())
      .pipe(compass({
          config_file: './config.rb',
          css: './public/src/css/',
          sass: './public/src/scss/'
      }))
     .pipe(autoprefixer('last 2 versions'))
     .pipe(gulp.dest('public/src/css/'))
     .pipe(reload({stream:true}));
});


gulp.task('html', function() {
  gulp.src('public/**/*.html');
});  

gulp.task('browser-sync', function() {
    browserSync({
      server: {
         baseDir: "./public/"
      }
   });
});

gulp.task('watch', function() {
   gulp.watch('public/src/js/**/*.js', ['scripts']);
   gulp.watch('public/src/scss/**/*.scss', ['styles']);
   gulp.watch('public/**/*.html', ['html']); …

我正在使用与Gulp的browsersync,在特定的文件更改上运行一些任务.每当我保存文件时,[BS] Reloading Browsers...我的终端都会得到10+ ,并且性能可以理解为滞后.

这是我的gulpfile:

gulp.task('bowerJS', function() {
  gulp.src(lib.ext('js').files)
    .pipe(concat('lib.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('app/assets/js'));
});

gulp.task('bowerCSS', function() {
  gulp.src(lib.ext('css').files)
    .pipe(concat('lib.min.css'))
    .pipe(gulp.dest('app/assets/css/'));
});


// Compile sass into CSS & auto-inject into browsers
gulp.task('less', function() {
    gulp.src('./app/css/*.less')
        .pipe(less())
        .pipe(autoprefixer({
          browsers: ['last 2 versions'],
          cascade: false
        }))
        .pipe(gulp.dest('app/assets/css'))
        .pipe(browserSync.stream());
});

// Render Jade templates as HTML files

gulp.task('templates', function() {
  gulp.src('views/**/*.jade')
    .pipe(jade({
      pretty: true
    }))
    .pipe(gulp.dest('app/src/'))
});

gulp.task('php', function() {
    php.server({ base: 'app', port: 8123, keepalive: true});
});
gulp.task('serve', ['bowerJS', 'bowerCSS', 'less', 'templates', …