将gulp和es6设置为在保存时重新加载

过去几天我一直在和gulp和babel一起玩。通过教程，我已经牢牢掌握了如何通过gulp设置babel。我注意到教程越新，发生的变化就越多

这里有一种方法，我可以用transpiler设置es6到es5

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'));
});

但是，我不希望每次都重新运行gulp，我希望dist/文件夹在每次保存时更新

我添加了浏览器同步和删除

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']);

我设置了一个默认值，它将清除dist文件夹，然后运行es6to5。之后，我希望它同步和更新。我昨晚打电话给watchFiles

但是，我不再获得更新的js文件。dist文件夹中的文件没有编译到es5，所有内容都将转换为404

任务

copyIndex seems to be the problem but I am not sure how to fix it or if it is the only problem.  Any direction helps.

你打错了

它应该是

gulp.watch（'src/***/.js'，['es6to5']），而不是
gulp.watch（'src/***/.js'，['babelIt']）

无论如何，我建议使用它来代替内置的
watch
功能。它有几个优点，主要是在创建新文件时重新编译。
您有输入错误

它应该是
gulp.watch（'src/***/.js'，['es6to5']），而不是
gulp.watch（'src/***/.js'，['babelIt']）

无论如何，我建议使用它来代替内置的
watch
功能。它有几个优点，主要是在创建新文件时重新编译。
为了开发目的，您是否尝试在
dist
的更改重建中实现，从该
dist
目录为您的开发构建提供服务？这就是我试图实现的目标。您是否试图从该
dist
目录为您的开发构建提供服务？这就是我试图实现的目标。感谢您的关注。我删除了babel it任务，但没有抓住变化。谢谢你抓住了这一点。我删除了babel it任务，没有抓住变化。