How can I change gulpfile.js to track both app and dist functions at the same time?

Question

npm

Can you please tell me how to make surveillance for css, js f-mi of the app folder and for html f-mi of the release folder dist ?
Now shadowing and reloading of the file takes place behind the index.html of the app folder, and I need to see the reload of the file in the browser of the file already assembled by the rigger in the release folder!

"use strict"

var gulp = require('gulp'),
  connect = require('gulp-connect'),
  opn = require('opn'),
  wiredep = require('wiredep').stream,
  useref = require('gulp-useref'),
  sftp = require('gulp-sftp'),
  clean = require('gulp-clean'),
  rigger = require('gulp-rigger');

// Запускаем локальный сервер
gulp.task('connect', function() {
  connect.server({
    root: 'app',
    livereload: true,
    port: 8888
  });
  opn('http://localhost:8888');
});


// Clean
gulp.task('clean', function(){
  return gulp.src('dist', {read: false})
    .pipe(clean());
});
// Работа с Build (useref + rigger) 
gulp.task('build', ['clean'], function () {
  var assets = useref.assets();

  return gulp.src('app/*.html')
    .pipe(rigger())

    .pipe(assets)
    .pipe(assets.restore())
    .pipe(useref())		
    .pipe(gulp.dest('dist'));
});

// Работа с Bower
gulp.task('bower', function(){
  gulp.src('./app/index.html')
    .pipe(wiredep({
    directory : "app/bower_components"
  }))
    .pipe(gulp.dest('./app'));
});

// Работа с HTML
// gulp.task('html', function () {
// 	gulp.src('./dist/*.html')
// 	.pipe(connect.reload());
// });

// Работа с CSS
gulp.task('css', function () {
  gulp.src('./app/css/*.css')
  .pipe(connect.reload());
});

// Слежка
gulp.task('watch', ['build'], function () {
  gulp.watch(['./app/*.html'], ['html']);
  gulp.watch(['./app/js/*.js'], ['js']);
  gulp.watch(['./app/css/*.css'], ['css']);
  gulp.watch('bower.json', ['bower']);

  //gulp.watch(['dist/*.html'], ['html']);
});

// Задача по-умолчанию
gulp.task('default', ['connect', 'watch', 'build']);