Why doesn't gulp compile js files without reloading?

Question

JavaScript

var gulp         = require('gulp'), // Подключаем Gulp
    sass         = require('gulp-sass'), //Подключаем Sass пакет,
    browserSync  = require('browser-sync'), // Подключаем Browser Sync
    concat       = require('gulp-concat'), // Подключаем gulp-concat (для конкатенации файлов)
    uglify       = require('gulp-uglifyjs'), // Подключаем gulp-uglifyjs (для сжатия JS)
    cssnano      = require('gulp-cssnano'), // Подключаем пакет для минификации CSS
    rename       = require('gulp-rename'), // Подключаем библиотеку для переименования файлов
    del          = require('del'), // Подключаем библиотеку для удаления файлов и папок
    imagemin     = require('gulp-imagemin'), // Подключаем библиотеку для работы с изображениями
    pngquant     = require('imagemin-pngquant'), // Подключаем библиотеку для работы с png
    cache        = require('gulp-cache'), // Подключаем библиотеку кеширования
    autoprefixer = require('gulp-autoprefixer'),// Подключаем библиотеку для автоматического добавления префиксов
    plumber = require('gulp-plumber'); // Подключаем gulp-plumber для запрета остановки gulp

gulp.task('sass', function(){ // Создаем таск Sass
    return gulp.src('app/sass/**/*.sass') // Берем источник
        .pipe(sass()) // Преобразуем Sass в CSS посредством gulp-sass
        .pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true })) // Создаем префиксы
        .pipe(gulp.dest('app/css')) // Выгружаем результата в папку app/css
        .pipe(browserSync.reload({stream: true})) // Обновляем CSS на странице при изменении
      });

gulp.task('browser-sync', function() { // Создаем таск browser-sync
    browserSync({ // Выполняем browserSync
        server: { // Определяем параметры сервера
            baseDir: 'app' // Директория для сервера - app
          },
        notify: false // Отключаем уведомления
      });
  });

gulp.task('scripts', function() {
        return gulp.src([ // Берем все необходимые библиотеки
            'app/libs/jquery/dist/jquery-3.2.1.min.js', // Берем jQuery
            'app/libs/equalHeights/equalheights.js', // Берем equalheights
            'app/libs/OwlCarousel2-2.2.1/dist/owl.carousel.min.js', // Берем owlcarousel
            'app/js/common.js', // Берем common.js
            ])
            .pipe(concat('libs.min.js')) // Собираем их в кучу в новом файле libs.min.js
            .pipe(uglify()) // Сжимаем JS файл
            .pipe(gulp.dest('app/js')); // Выгружаем в папку app/js
          });


gulp.task('css-libs', ['sass'], function() {
    return gulp.src('app/css/style.css') // Выбираем файл для минификации
        .pipe(plumber()) // Отключаем прерывание при ошибках
        .pipe(cssnano()) // Сжимаем
        .pipe(rename({suffix: '.min'})) // Добавляем суффикс .min
        .pipe(gulp.dest('app/css')); // Выгружаем в папку app/css
      });

gulp.task('watch', ['browser-sync', 'css-libs', 'scripts'], function() {
    gulp.watch('app/sass/**/*.sass', ['sass']); // Наблюдение за sass файлами в папке sass
    gulp.watch('app/*.html', browserSync.reload); // Наблюдение за HTML файлами в корне проекта
    gulp.watch('app/js/*.js', browserSync.reload);   // Наблюдение за JS файлами в папке js
  });

gulp.task('clean', function() {
    return del.sync('dist'); // Удаляем папку dist перед сборкой
  });

gulp.task('img', function() {
    return gulp.src('app/img/**/*') // Берем все изображения из app
        .pipe(cache(imagemin({  // Сжимаем их с наилучшими настройками с учетом кеширования
          interlaced: true,
          progressive: true,
          svgoPlugins: [{removeViewBox: false}],
          use: [pngquant()]
        })))
        .pipe(gulp.dest('dist/img')); // Выгружаем на продакшен
      });

gulp.task('build', ['clean', 'img', 'sass', 'scripts'], function() {

    var buildCss = gulp.src([ // Переносим библиотеки в продакшен
      'app/css/style.min.css',
      ])
    .pipe(gulp.dest('dist/css'))

    var buildFonts = gulp.src('app/fonts/**/*') // Переносим шрифты в продакшен
    .pipe(gulp.dest('dist/fonts'))

    var buildJs = gulp.src('app/js/**/*') // Переносим скрипты в продакшен
    .pipe(gulp.dest('dist/js'))

    var buildHtml = gulp.src('app/*.html') // Переносим HTML в продакшен
    .pipe(gulp.dest('dist'));

  });

gulp.task('clear', function () {
  return cache.clearAll();
})

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

Please tell me what could be wrong. Gulp does not display changes in js files while running, and in order to see the changes, you have to restart gulp. Where did I go wrong?

Answer 1

Take a close look at the watch task

gulp.watch('app/*.html', browserSync.reload);
gulp.watch('app/js/*.js', browserSync.reload);

You follow the JS changes, and when you change, you just do a reload without starting the build.
The Browersync website has documentation on integrating browsersync and gulp
And add a task to the scripts task at the end
.pipe(browserSync.reload());