簡單利用gulp-babel搭建es6轉es5環境

es6是什么？借着這個話題，我想說：身為web前端的工作者連es6沒聽說，轉行吧。

demo的代碼如下：

源碼下載 或者 gitclone地址： [e-mail]: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該進，如下便可一步到位：