Automatic translation of ES6 to ES2015 using gulp

Installed packages

npm install --save-dev gulp-babel babel-core babel-preset-env

Next, the dependencies from the package.json

{
  "name": "babel",
  "version": "1.0.0",
  "description": "site",
  "main": "index.js",
  "scripts": {
    "build": "babel app/js -d dist --presets es2015",
    "watch": "babel app/js -d dist --presets es2015 -w"
  },
  "author": "ilya",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "browser-sync": "^2.18.13",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^4.0.0",
    "gulp-babel": "^7.0.1",
    "gulp-sass": "^3.1.0"
  }
}

And gulpfile.js

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    browserSync = require('browser-sync'),
    autoprefixer = require('gulp-autoprefixer'),
    babel = require('gulp-babel');

gulp.task('sass', function () {
  return gulp.src('app/scss/style.scss')
      .pipe(sass())
      .pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], {cascade: true}))
      .pipe(gulp.dest('app/css'))
      .pipe(browserSync.reload({stream: true}))
});

gulp.task('browser-sync', function () {
  browserSync({
    server: {
      baseDir: 'app'
    },
    notify: false
  });
});

gulp.task('babel', () =>
  gulp.src('app/js/*.js')
    .pipe(babel({presets: ['env']}))
    .pipe(gulp.dest('app/dist'))
);

gulp.task('watch', ['browser-sync', 'sass', 'babel'], function () {
  gulp.watch('app/scss/**/*.scss', ['sass']);
  gulp.watch('app/*.html', browserSync.reload);
  gulp.watch('app/js/*.js', browserSync.reload);
});

And the structure of the project