ecmascript 6 - Getting gulp and es6 set up to reload on saves -

i have been playing gulp , babel past few days. getting solid grasp of setting babel gulp through tutorials. i've noticed newer tutorial more changes develop.

here 1 way able set es6 es5 transpiler.

var gulp  = require('gulp'); var babel = require('gulp-babel');  gulp.task('es6to5', function () { return gulp.src('js/src/app.js')     .pipe(babel())     .pipe(gulp.dest('dist')); }); 

however, not want rerun gulp each time, , want dist/ folder update on each save.

i added browser-sync , delete.

var gulp  = require('gulp'); var babel = require('gulp-babel'); var browsersync = require('browser-sync'); var del = require('del');    gulp.task('clean:dist', function() {     return del([             'dist/app.js'         ]); });  gulp.task('es6to5', function () {     return gulp.src('js/src/app.js')         .pipe(babel())         .pipe(gulp.dest('dist')); });  gulp.task("browsersync", function() {     browsersync({         server: {             basedir: './dist'         }     }); });  gulp.task("copyindex", ['clean:dist'], function() {     gulp.src("src/index.html")     .pipe(gulp.dest('./dist'))     .pipe(browsersync.reload({stream: true})); });  gulp.task('watchfiles', function() {     gulp.watch('src/index.html', ['copyindex']);     gulp.watch('src/**/*.js', ['babelit']); });   gulp.task('default', ['clean:dist', 'es6to5','browsersync','watchfiles']); 

i set default clean out dist folder run es6to5. afterwards want sync , update. called watchfiles last.

however, no longer getting updated js files. files in dist folder not compiling es5 , going 404.

the task

copyindex seems problem not sure how fix or if problem.  direction helps. 

you have typo.

it should gulp.watch('src/**/*.js', ['es6to5']);, not gulp.watch('src/**/*.js', ['babelit']);

anyway suggest use gulp-watch instead of built-in watch function. has several advantages, recompile on new file creation.