请教一个gulpfile.js配置的问题

我的gulpfile.js配置文件定义了三个五个任务:

var gulp = require('gulp'),
  concat = require('gulp-concat'),
  rename = require('gulp-rename'),
  uglify = require('gulp-uglify');

var nodemon = require('gulp-nodemon');

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

var config = require('./config');

// Load plugins
var $ = require('gulp-load-plugins')();

// 启动production环境
gulp.task("prod", ['compile', 'start-prod'], function() {
});

// 启动development环境
gulp.task('dev', ['compile', 'start-dev', 'hot-replace'], function() {
});

// 启动dev环境
gulp.task('start-dev', function(cb) {
  return nodemon({
    script: './bin/www',
    env: {  
        "NODE_ENV": "development",
        "PORT": config.development.port 
    }  
  });
});

// 启动生产环境
gulp.task('start-prod', function () {
  return nodemon({
    script: 'pm2 start ./bin/www --name flexible-web',
    env: {
      "NODE_ENV": "production",
      "PORT": config.production.port
    }
  });
});




// 编译
function compile() {
  return gulp.src('./public/js/*.js')
    .pipe($.plumber())
    .pipe($.babel({
      presets: ['es2015']
    }))
    .pipe(gulp.dest('./public/dist/js/'));
}

/* es6编译 */
gulp.task('compile', function() {
  compile();
});


gulp.task('hot-replace', function () {
    console.log('the hot-replace port is : ', config.development.port + 1);
    browserSync.init({
        proxy: "localhost:" + config.development.port,
        port: config.development.port + 1
    });
    gulp.watch("./public/html/*.html").on('change', reload);
    gulp.watch("./views/*.ejs").on('change', reload);
    gulp.watch("./public/*/*.js").on('change', function() {
      compile();
      reload();
    });
});

我就是想用dev或者prod这两个任务,把服务器跑起来,顺便在dev环境的时候,能够监听静态文件的变化,推送到浏览器刷新,但是,我这个样子配置后,浏览器是打开了,但是,一直在加载的状态,需要点击刷页面,才能进入页面,然后,修改了静态文件也不能把更新的内容推送到浏览器. 请问,这个怎么配置? 我想通过gulp dev就可以把任务都完成顺便启动服务器.