Как избежать дублирования кода в скрипте после конкатенации?

Question

[Unknown]

Привет!
Хочу написать скрипт, который будет:
Брать все файлы js и пропускать через babel и вместе с тем делать reload страницы. Но при выполнении таска gulp js код конкатенируется столько раз сколько мы вызвали таск gulp js.
Что мне нужно сделать, чтобы этого не происходило?
Мой код

const gulp              = require('gulp'),
         browserSync  = require('browser-sync'),
         sourcemaps   = require('gulp-sourcemaps'),
         babel  	       = require('gulp-babel'),
         rename          = require('gulp-rename'),
         concat 	       = require('gulp-concat');

gulp.task('js', () => {
	return gulp.src('app/src/**/*.js')  // Взять все файлы в указанной дирректории
		.pipe(concat('bundle.hello.js'))   // Конкатенировать все в один файл
		.pipe(gulp.dest('app/src/js'))   // Расположить в указанной дирректории
		.pipe(browserSync.stream());
	});

// babel
gulp.task('babel', () => {
	return gulp.src('app/src/js/bundle.hello.js')       //  Взять файл
			.pipe(babel({                                      // Пропустить код через babel
				presets: ['babel-preset-env'],
			}))
			.pipe(rename('hello.js'))                     // Переименуем и создадим новый файл с изменениями
			.pipe(gulp.dest('app/src'))                  // Положим в папочку
			.pipe(browserSync.stream());
});

gulp.task('serve', ['sass', 'babel'], () => {           // Заводим сервер
	browserSync({
		server: {
				baseDir: 'app',
		},
		notify: false,
	});
	gulp.watch('app/sass/*.sass', ['sass']);             
	gulp.watch('app/src/*.js', ['js']).on('change', browserSync.reload);
	gulp.watch('app/src/**/*.js');
	gulp.watch('app/*.html').on('change', browserSync.reload);
});