简单利用gulp-babel搭建es6转es5环境

es6是什么？借着这个话题，我想说：身为web前端的工作者连es6没听说，转行吧。

demo的代码如下：

源码下载 或者 gitclone地址： git@git.oschina.net:sisheb/gulpdemo.git

1.gulp用到开发plugins如下：

"devDependencies": {
    "babel-preset-es2015": "^6.24.1", //es2015转码规则
    "gulp": "^3.9.1", //babel插件
    "gulp-babel": "^6.1.2",
    "gulp-clean": "^0.3.2",
    "gulp-jshint": "^2.0.4", //js检错
    "gulp-livereload": "^3.8.1",
    "gulp-load-plugins": "^1.5.0",
    "gulp-plumber": "^1.1.0", //gulp的处理错误
    "gulp-webserver": "^0.9.1"
  }

　　说明：gulp-babel和babel-preset-es2015一起使用，jshint检错与es6语法冲同，需要建里一个配置文件 .jshint：

{
    "asi": true,
    "esversion": 2015
}

2.开发文件目录

3. gulpfile.js 配置

var gulp = require('gulp'),
	$ = require('gulp-load-plugins')();

var app = {
	srcPath: 'src/',
	devPath: 'build/'
};

gulp.task('js',function(){
	return gulp.src(app.srcPath + 'script/**/*.js',{base:app.srcPath})
		.pipe($.plumber())
		.pipe($.babel({
            　　　　presets: ['es2015']
        　　　　　}))
		.pipe(gulp.dest(app.devPath));
});
gulp.task('html',function(){
	return gulp.src(app.srcPath + '**/*.html',{base:app.srcPath})
		.pipe(gulp.dest(app.devPath));
});

gulp.task('clean',function(){
	return gulp.src(app.devPath)
		.pipe($.clean());
});

//浏览器同步
gulp.task('webserve',function(){
	return gulp.src(app.devPath)
		.pipe($.webserver({
			livereload: true, //开启gulp-livereload
			open: true,
			port: 2333 //浏览器端口
		}));
});

// 监听
gulp.task('watch',function(){
    gulp.watch(app.srcPath + 'script/**/*.js', ['js']);
    gulp.watch(app.srcPath + '**/*.html', ['html']);
});

//定义gulp默认任务
gulp.task('default',['webserve','watch']);

　　

问题一：当我执行gulp，发现并未一步执行浏览器同步，这是怎么回事？

先查看命令执行结果，发现并没有'js'和'html'：

所以我定义一个build的task：

发现没有成功，然后在查看：

发现'webserve'先执行了完成，而'js'和'html'后执行。如果在执行gulp一次，发现居然能够在浏览器同步，这是因为第一次gulp执行留下的build文件，需要执行清理。

在npm社区查找gulp-webserver的api，并没有看到在回调中使用gulp-webserver，而是推荐使用gulp-connact，我刚才使用gulp-connact,看到网上有人使用gulp-webserve，于是便使用 。

我将defualt的task该进，如下便可一步到位：