javascript – 非常慢的浏览器同步服务器启动与Gulp

前端之家收集整理的这篇文章主要介绍了javascript – 非常慢的浏览器同步服务器启动与Gulp前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
[编辑:解决了!]

看到我的答案在下面(我试图接受,但我想我不能接受我自己的答案两天).

[>>原始问题在<<] 我在服务器模式下使用BrowserSync(使用其内置的静态服务器)与本地项目中的GulpJS,除了BrowserSync服务器启动速度非常慢以外,所有内容都似乎正常工作. BrowserSync本身似乎在运行Gulp时立即初始化,但服务器启动大约需要4到5分钟(有时甚至更多),并返回访问URL.在此期间,一切都继续运行,BrowserSync响应reload()调用等等,但访问不可用通常的URL(本例中为localhost:3000和localhost:3001).一旦返回访问URL,服务器似乎已经启动,并且BrowserSync的页面刷新工作正常,实际上非常快速. 我尝试过几种不同配置的gulpfile.js,尝试不同的方式初始化BrowserSync,调用stream()和reload()方法的不同方法(包括尝试BrowserSync的基本Gulp / SASS“配方”)和不同的端口号,但所有配置都有同样的问题.我甚至尝试禁用我的防火墙和AV软件(Avast),但没有. 我正在运行Windows 8.1,如果这是相关的. BrowserSync通过NPM在本地新建到项目,并且其他目录的新鲜本地安装也具有相同的问题. NPM,Ruby,Gulp和所有模块似乎是最新的.对于什么是值得的,我所有的Ruby,Gulp和Node.js的其他经验都非常顺利,无问题.

我找不到任何其他帖子提到这个问题,并开始认为这是正常的行为.这是正常的,如果没有,有没有人有任何想法的事情尝试?由于BrowserSync服务器总是启动(最终),因此这个延迟不是世界的结束,但是在我的工作流程中,我宁愿修复而不仅仅是处理它,这仍然是一个扭结.

最后,这是我的gulpfile.js:
/ *文件:gulpfile.js * /

var gulp  = require('gulp'),gutil = require('gulp-util');
    jshint = require('gulp-jshint');
    sass   = require('gulp-sass');
    concat = require('gulp-concat');
    uglify = require('gulp-uglify');
    sourcemaps = require('gulp-sourcemaps');
    imagemin = require('gulp-imagemin');
    browserSync = require('browser-sync').create();

gulp.task('default',['watch'],browserSync.reload);

// JSHint
gulp.task('jshint',function() {
  return gulp.src('src/js/**/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('jshint-stylish'));
});

// Build JS
gulp.task('build-js',function() {
  return gulp.src('src/js/**/*.js')
    .pipe(sourcemaps.init())
      .pipe(concat('main.js'))
      //only uglify if gulp is ran with '--type production'
      .pipe(gutil.env.type === 'production' ? uglify() : gutil.noop()) 
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('public/www/js/core'));
});

// Build CSS
gulp.task('build-css',function() {
    return gulp.src('src/sass/**/*.{sass,scss}')
        .pipe(sourcemaps.init())
            .pipe(sass()).on('error',handleError)
        .pipe(sourcemaps.write()) // Add the map to modified source.
        .pipe(gulp.dest('public/www/css/core'))
        .pipe(browserSync.stream({match: '**/*.css'}));
});

// ImageMin
gulp.task('imagemin',function () {
    return gulp.src('src/img/*')
        .pipe(imagemin({
            progressive: true,svgoPlugins: [{removeViewBox: false}]
        }))
        .pipe(gulp.dest('public/www/img'));
});

// Handle errors
function handleError(err) {
  console.log(err.toString());
  this.emit('end');
}

// Watch function
gulp.task('watch',function() {
    browserSync.init({
      server: "./public/www",//port: 3002
    });

    gulp.watch('src/js/**/*.js',['jshint']);
    gulp.watch('src/sass/**/*.{sass,scss}',['build-css']);
    gulp.watch('src/js/**/*.js',['build-js']);
    gulp.watch('src/img/*',['imagemin']);
    gulp.watch("public/www/css/**/*.css").on('change',browserSync.reload);
})

PS:这是我第一个关于stackoverflow的问题,我是nodejs,gulpjs和BrowserSync的新手,所以我希望这个问题不是完全可怕的哈哈

解决方法

BrowserSync Twitter帐户建议我将“在线”选项设置为true,并且…似乎有效!

我将其设置在BrowserSync的init中,如下所示:

browserSync.init({
  server: "./public/www",online: true
});

…和延迟了!

通过BrowserSync文档(http://www.browsersync.io/docs/options/#option-online),将在线选项设置为true似乎会跳过在线检查.所以,我猜这个检查是不知何故造成延误的原因?对我来说似乎很奇怪,但现在工作更好.

猜你在找的JavaScript相关文章