簡單利用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該進，以下即可一步到位：