Transpile into ES 5 using babel by gulp-watch not working

Question

I am new to gulp.I am trying to setup a watch so that my src/main.js file is transpiled to dist/main.js file. The Gulpfile has the following code

var gulp = require('gulp');
var babel = require('gulp-babel');
var watch = require('gulp-watch');
var paths = {
    babel:"src/main.js"
}

gulp.task('babel', function() {
    return gulp.src(paths.babel)
        .pipe(watch(paths.babel))
        .pipe(babel())
        .pipe(gulp.dest('dist/'))
})
gulp.task('default', ['babel']);

My dist/main.js file does not reflect changes from src/main.js . Any help as to where I am going wrong would be appreciated.

Answer 1

Try the following (and make sure you execute gulp watch , not just gulp ):

var gulp = require('gulp');
var babel = require('gulp-babel');
var watch = require('gulp-watch');
var rimraf = require('rimraf');
var paths = {
  babel: 'src/main.js',
  build: 'dist'
};

gulp.task('clean', function(cb) {
  rimraf(paths.build, cb);
});

gulp.task('build', ['clean'], function() {
  return gulp
    .src(paths.babel)
    .pipe(babel())
    .pipe(gulp.dest(paths.build));
});

gulp.task('watch', ['build'], function() {
  return watch(paths.babel, function() {
    gulp.start('build');
  });
});

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

If that doesn't work, maybe your paths.babel is wrong. Try changing it to src/**/*.js .

Answer 2

the babel task and watch task are separate:

var gulp = require('gulp');
var babel = require('gulp-babel');
var watch = require('gulp-watch');
var paths = {
    babel:"src/main.js"
};

gulp.task('watch', function() {
    gulp.watch(paths.babel, ['babel']);
});

gulp.task('babel', function() {
   gulp.src(paths.babel)
        .pipe(babel())
        .pipe(gulp.dest('dist/'));
});

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

watch will execute babel when it detects a change to "src/main.js"