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

过去几天我一直在玩弄gulp和babel。我通过教程掌握了建立babel的一口气。我注意到，教程越新，发展的更多变化。将gulp和es6设置为重新加载保存

这是我能够用转译器设置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')); 
});

但是，我不想每次都重新运行吞吐量，并且我希望在每次保存时更新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.

来源

2016-01-07 Winnemucca

您是否试图通过改变'dist'的重建来实现开发目的，为您的dist'目录下的开发构建服务？ – krl

这就是我想要实现的。 – Winnemucca

你有一个错字。

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

无论如何，我建议使用gulp-watch，而不是内置watch功能。它有几个优点，主要是重新编译新的文件创建。

来源

2016-01-07 21:25:54

感谢您的支持。我删除了它的任务，并没有赶上变化。 – Winnemucca

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

回答

相关问题