标签: browser-sync

我正在开发一个快速应用程序.我只使用browserSync来观看静态文件,但是现在,我想用快速应用程序做同样的事情.

我看到很多使用Gulp的例子.但我想知道是否有任何解决方案只能使用npm脚本进行管理？(和nodemon？)

我目前的脚本:

"scripts": {
    "start": "npm run start-server & npm run watch-js",
    "build-js": "browserify -t babelify -t aliasify -t partialify src/ | uglifyjs > public/app.js",
    "start-server": "browser-sync start --server 'public/' --files 'public/' --port 9000 --no-ui",
    "watch-js": "watchify -vd -t babelify -t aliasify -t partialify src/ -o public/app.js",
  },

我已经设置了浏览器同步来使用 nodemon 和 express。我没有使用 gulp 或 grunt，而是通过我的 package.json 文件中的 npm 脚本运行所有内容。

现在，一切正常，但我在运行脚本时遇到错误，想知道错误是关于什么以及如何修复它。

首先，这是我的设置：

{
  "scripts": {
    "dev": "npm run development",
    "dev:css": "postcss assets/css/style.css -o public/assets/css/style.css",
    "dev:sync": "browser-sync start --proxy 'localhost:3000' --files='./views/**/*.html' --no-ui --no-notify",
    "development": "cross-env NODE_ENV=development concurrently \"npm:dev:css\" \"nodemon app.js -e js,html\" \"npm:dev:sync\"",
  },
  "dependencies": {
    "concurrently": "^5.2.0",
    "express": "^4.17.1"
  },
  "devDependencies": {
    "browser-sync": "^2.26.10",
    "cross-env": "^7.0.2"
  }
}

这是错误消息：

 YError: Invalid first argument. Expected boolean or string but received function.
[dev:sync]     at argumentTypeError (C:\laragon\www\projects\startup-reporter--node\node_modules\yargs\build\lib\argsert.js:64:11)
[dev:sync]     at C:\laragon\www\projects\startup-reporter--node\node_modules\yargs\build\lib\argsert.js:45:17 …

当我运行gulp时,服务器启动了消息:无法获取/.当我指向localhost:3000/app/index.html时,该站点重定向到localhost:3000/home并正常工作.但是,当我重新加载页面时,它给出:无法获取/ home.

请查看以下配置以查看是否遗漏了任何内容:

访问路径:app/index.html

这是我的gulpfile.js:

var gulp = require('gulp'),
nodemon = require('gulp-nodemon'),
jshint = require('gulp-jshint'),
browserSync = require('browser-sync')
modRewrite  = require('connect-modrewrite');

gulp.task('lint', function () {
  gulp.src('app/js/*.js').pipe(jshint());
});

gulp.task('serve', function() {
  browserSync({
      server: {
          baseDir: "./",
          middleware: [
              modRewrite([
                  '!\\.\\w+$ /index.html [L]'
              ])
          ]
      }
  });
});

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

角度路径文件:

  $urlRouterProvider.otherwise("/home");

  $stateProvider
    .state('home', {
      url: "/home",
      templateUrl: "app/partials/home.html",
      controller: 'HomeCtrl'
    })
...

非常感谢!

Github:https://github.com/yhjor1212/angular-fire-powder

如何暂时禁用browsersync,以便它不会注入/修改HTML页面？(用于测试和调试.)

我的gulpfile.js看起来像这样:

gulp.task('default', ['build', 'browser-sync'], function () {
    gulp.watch("**/*.css", ['bs-reload']);
    gulp.watch(["**/*.js", "!**/*/node_modules/**/*.*"], ['bs-reload']);
    gulp.watch("**/*.html", ['bs-reload']);
});

即使我已经排除了node_modules,它也试图向所有node_modules添加一个监视.

怎么能排除它？

请注意,node_modules在项目的根目录中不存在,感染它位于项目的根目录之上,为什么它甚至包括相同的麻烦呢？

Error: EMFILE, too many open files '/Users/**/Documents/gits/tm/node_modules/browser-sync/lib/public/socket.io.js'
    at Object.fs.openSync (fs.js:438:18)
    at Object.fs.readFileSync (fs.js:289:15)
    at Object.utils.getSocketScript (/Users/**/Documents/gits/tm/node_modules/browser-sync/lib/snippet.js:109:19)

我有我的Gulp设置,可以在应用程序发生变化时自动加载/刷新我的网页.但是,我还想让它加载我的文档页面,并且每次都刷新该源文件.

我把它配置为从两个目录服务,但我不知道如何使用文档目录加载第二个选项卡.

[BS] Access URLs:
 ---------------------------------------
   Local: http://localhost:3000
 External: http://192.168.11.181:3000
 ---------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.11.181:3001
 ---------------------------------------
[BS] Serving files from: app/
[BS] Serving files from: docs/API.v1.1.0/

我的gulpfile.js服务器部分.

AppSync.init({
    server: {
        baseDir: [RootDir.home, RootDir.docs + DocumentationPath.javascript], 
        index: 'index.html',
        directory: false,           // Set to True for Browsing Files, not launching index
    },
    //open: false,
    //reloadOnRestart: false
});

我尝试HelpSync使用BrowserSync.create()和设置服务器变量添加第二个,但是这给出了重新使用地址的错误,即使我指定了一个新端口.

我希望启动并加载我的App和API文档,并在更改任何代码时继续刷新.我可以验证应用程序的工作原理,并且我的API确实正确记录了文档.

我是Sails和grunt的新手所以我可能会错过这个明显的东西.我试图在文件发生变化时自动在浏览器中刷新我的风帆应用程序.

我启动应用程序,sails lift它在默认端口上运行1337.

我尝试添加options: {livereload:true}到我的grunt-contrib-watch配置,但据我所知,我需要以某种方式将livereload JavaScript注入我的页面？

我尝试使用注入JavaScript grunt-contrib-connect的livereload选项,但似乎只是启动另一台服务器.当我导航到启动的服务器(localhost:8000)时,我只看到文件夹结构.然而,注入了livereload JavaScript.

如果可能的话,我想避免使用livereload Chrome插件.

将livereload JavaScript注入我的Sails应用程序的最佳方法是什么？或者我应该使用像Browsersync这样的其他工具？

谢谢!:)

我正在尝试创建一个吞吞吐吐的任务，该任务启动3个Browsersync实例，使用Protractor对它们运行端到端测试，然后很好地关闭Browsersync实例。

到目前为止，我已经提出了以下解决方案：

/**
 * Run the end-to-end tests using Protractor.
 */
gulp.task('test:protractor', [
  'serve:user',
  'serve:bootstrap',
  'serve:website'
], function(done) {
  var protractor = spawn('protractor', [
    path.resolve(__dirname, '..', 'protractor.conf.js'),
    '--suite=bootstrap',
    '--param.host.user', 'http://' + util.getDockerIp() + ':' + serve.userServer.getOption('port'),
    '--param.host.bootstrap', 'http://' + util.getDockerIp() + ':' + serve.bootstrapServer.getOption('port'),
    '--param.host.website', 'http://' + util.getDockerIp() + ':' + serve.websiteServer.getOption('port')
  ], {stdio: 'inherit'});
  protractor.on('close', function(code) {
    if (code) {
      throw new Error(chalk.red('End-to-end tests failed'));
    }
    serve.userServer.exit();
    serve.bootstrapServer.exit();
    serve.websiteServer.exit();
    done();
  });
});

这里的问题是xxxServer.exit()。此调用在process.exit()内部关闭整个NodeJS实例。这样，我无法很好地关闭每个服务器，而让gulp处理其余的服务器。

我找不到有关以其他任何方式关闭Browsersync的信息，因此我调查了该exit …

gulpfile.js

'use strict';

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

gulp.task('serve')

// Static Server + watching scss/html files
gulp.task('serve', function() {

    browserSync.init({
        server: "./public"
    });

    gulp.watch('./public/**/*.html').on('change', reload); // worked
    gulp.watch('./public/**/*.js').on('change', reload); // doesn't work
});

gulp.task('sass', function () {
  return gulp.src('./public/sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./public/css'))
    .pipe(reload({stream: true}));
});

gulp.task('sass:watch', function () {
  gulp.watch('./public/sass/**/*.scss', ['sass'])
});

gulp.task('default', ['serve','sass', 'sass:watch']);

使用上述gulp设置，当我更改html和sass文件时，我的broswersnyc可以正常工作，但不适用于javascript文件。

这是我的文件夹结构：

它与AngularJS有关吗？因为我app.js（位于我的public文件夹中）由AngularJS控制器组成。

BrowserSync正确刷新我正在修改的任何PHP页面,或SCSS或JS.但对于HTML文件,它不会刷新任何内容.为什么不？

注意我gulpfile.js嵌套在自己的子文件夹中/gulp/,这里是它的内容:

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var autoprefixer  = require('gulp-autoprefixer');
var plumber = require('gulp-plumber');
var onError = function (err) {
  console.log('An error occurred:', gutil.colors.magenta(err.message));
  gutil.beep();
  this.emit('end');
};

gulp.task('sass', function() {
  return gulp.src('../assets/styles/**/*.scss')
  .pipe(plumber({ errorHandler: onError }))
  .pipe(sass())
  .pipe(autoprefixer())
  .pipe(gulp.dest('../dist/styles'))
  .pipe(browserSync.reload({stream: true}))
});

gulp.task('js', function() {
  return gulp.src(['../assets/scripts/*.js'])
    .pipe(gulp.dest('../dist/scripts'))
    .pipe(browserSync.reload({
      stream: true
    }))
});

gulp.task('browserSync', function() {
  browserSync.init({
    proxy: 'http://127.0.0.1/vuejs/',
  })
})

gulp.task('watch', ['browserSync','js','sass'], function() {
  gulp.watch('../assets/styles/**/*.scss',['sass']);
  gulp.watch('../**/**/*.php', browserSync.reload); …