标签: browser-sync

寻找像browsersync这样的类似功能,让Node应用程序可以在任何文件更改时自动重新加载浏览器.

使用dnx-watch运行Asp.Net Core(也称为Asp.net 5),它会在任何C#代码更改时重新启动Kestrel Web服务器,但仍需手动刷新浏览器以查看其客户端或服务器文件是否发生更改.使用Gulp构建管道并考虑使用它来做dnx-watch和reload浏览器,但在网上找不到任何示例.

喜欢对此有所帮助.

谢谢

我正在使用与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', …

在我看来gulpfile.js,JS更改会自动触发BrowserSync重载和我的JS处理任务.但由于某种原因,尽管重载确实有效,但我的JS任务无法正确处理JS更改并在dist/文件夹中创建新的JS文件.我必须重新启动Gulp.为什么？

Gulpfile.js:

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

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

gulp.task('js', function() {
  return gulp.src(['../assets/scripts/*.js'])
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    .pipe(uglify())
    .pipe(gulp.dest('../dist/scripts'))
});

gulp.task('browserSync', function() {
  browserSync.init({
    proxy: 'http://127.0.0.1/my_site/new-front-page/',
  })
})

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

编辑:

还尝试了下面的代码为"js"任务(参见上面的代码与上面的代码相比),无济于事:

gulp.task('js', …

我们的Angular 4应用程序搭建了角度cli,使用scss作为默认样式.我们运行应用程序

ng serve --sourcemap --extractCss -o

获取scss源地图.这工作正常,应用程序编译,运行,源地图工作等.

但是,来自Angular1/Gulp/Browsersync世界,我错过了在没有完整页面重新加载的情况下注入构建的css.目前,每当我编辑sass文件时,webpack都会在Chrome中编译并重新加载页面.

这是现在唯一的工作方式吗？没有重新加载就没有办法简单地强制刷新css(就像在Gulp时代的browsersync那样)？

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

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

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

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

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

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

我有一个现有的节点应用程序.我的Node目录结构设置如下:

./
  node_modules/
  src/
    views/
      index.html
      ...
    server.js
  test/
  gulpfile.js
  package.json

我可以node ./src/server.js从上面显示的根目录成功启动我的应用程序.一旦启动,我可以在浏览器中访问" http:// localhost:3000 "并查看index.html的内容,就像我期待的那样.

我想加快我的开发速度,最近我学会了browserync.为了将它包含在我的gulp过程中,我有以下内容:

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

browserSync.init({
  server: {
    baseDir: './src/',
    server: './src/server.js'
  }
});

当我运行gulp时,我在命令行中看到以下内容:

BS]访问URL:

 --------------------------------------
       Local: http://localhost:3000
    External: http://[ip address]:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://[ip address]:3001
 --------------------------------------

然后我的浏览器打开,它会尝试加载http:// localhost:3000.此时,我在浏览器窗口中看到以下错误:

Cannot GET /

我究竟做错了什么？如果我使用启动我的应用程序,我可以成功访问http:// localhost:3000node ./src/server.js,但是,它不像BrowserSync一样运行.我究竟做错了什么？

我正在开发一个快速应用程序.我只使用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",
  },

当我运行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(){ …

一些让我发疯的事情,它突然开始给我所有的团队成员.如果您在断点处暂停超过几秒钟然后继续(F8),浏览器将刷新页面.

它发生在我们的Mac和Windows机器上.

我们正在运行一个带有gulp和browser-sync的AngularJS项目.即使我转向所有的观察者,它仍然会发生.

我能做什么？？

我已经设置了浏览器同步来使用 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 …