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

Question

这几天一直在玩gulp和babel。通过教程，我对使用 gulp 设置 babel 有了扎实的了解。我注意到教程越新，变化就越多。

这是我能够使用转译器将 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.

Answer 1

你打错了。

应该是gulp.watch('src/**/*.js', ['es6to5']);，不是gulp.watch('src/**/*.js', ['babelIt']);

无论如何，我建议使用 gulp-watch 而不是 built-in watch 函数。它有几个优点，主要是它在创建新文件时重新编译。

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

Getting gulp and es6 set up to reload on saves

ecmascript-6

gulp

browser-sync

babeljs