公司里很多同事在用ES6实现业务逻辑了，我也想试试。在公司的项目里，我写的ES6只要打开命令窗输入gulp watch 就自动将ES6转成ES5并放在相应的文件夹里了。我回家也想练习，但又不知道该怎么转，用在线的babel我就只能每写一个文件都要上去手动转换一次，不高兴这样做。所以我就想自己搭建一个公司项目那样的环境，几番查阅对比，终于知道用一个gulpfile配置文件就可以实现了。记录下实现历程：
一、介绍下Gulp
gulp和grunt一样是个项目构建工具。gulp的核心在于流式操作和简单的API，可以自动执行指定的任务比如编译、压缩等，方便且高效。
二、实战：安装并完成gulpfile文件
1、安装node
2、切换到工作目录，打开命令窗运行“npm init”输入参数，该目录下会生成一个package.json文件，里面包含刚刚输入的参数。（我的参数全用的默认的，没有单独修改）
3、安装gulp。命令如下， --save-dev会把安装的都写入package.json文件中。
npm install gulp --save-dev
4、安装gulp插件（目前有18个），刚开始并不知道要安装哪些插件，所以乱七八糟的看着公司项目里有的就都安上了，后来发现其实很多是用不到的。安装插件命令如下，不同插件只需修改插件名即可。
npm install gulp-babel --save-dev //安装babel转码插件
npm install gulp-plumber gulp-replace --save-dev //安装多个插件，插件间用空格分隔即可
5、新建gulpfile.js文件，gulpfile中写的就是指定gulp完成什么任务。gulp的方法有：task、watch、src和dest。
gulp.src(globs[, options]) 指定要处理的原文件路径，globs可以是字符串或者数组形式，数组表示多个文件；options一般不用传，默认是true。
gulp.src(app/js/just.try.js); //指定具体文件
gulp.src(app/js/*.js); //该app/js下的所有js文件
gulp.src(app/**/*.js); //app下所有文件夹中的所有js文件
！app/js/*.js //除app/js下的所有js文件外 ES6写法`!${filename}`
gulp.dest(path[,options]) 文件的输出目录，可以调用多个dest将输出写入多个目录。
gulp.task(name[,deps][,fn]) 定义任务，一般传两个参数，第一个参数任务名称，第二个参数任务执行的函数。如果一个任务名是default，则这个任务是默认任务直接输入gulp就会运行，一般可以用做提示信息。
gulp.watch(globs [,opts], tasks) 监听指定文件的变化，glob同src的globs一样，tasks要执行的任务名或任务函数。
const from = './appes6/js/**/*.js';
gulp.watch(from, ['convertJS']); //convertJS执行的任务名
gulp.watch('app/js/just.try.js', function(){ //直接用函数替代任务名，建议用任务名，这样可以一个任务多次调用
console.log('hi');
})
6、完成的gulpfile.js文件
const gulp = require('gulp');
const babel = require('gulp-babel');
const plumber = require('gulp-plumber');
const replace = require('gulp-replace');
const from = './appes6/js/**/*.js';
const to = './app/js'
// 编译
gulp.task('convertJS', function(){
return gulp.src(from) //要编译的路径
.pipe(plumber()) //查错
.pipe(babel({
'presets': ['es2015'] //转换配置，还可以添加react等
}))
//babel自动添加use strict可能会引起错误，删除
.pipe(replace(/"use strict";/, ''))
.pipe(replace(/'use strict';/, ''))
.pipe(gulp.dest(to)) //编译完成后的输出目录
})
// 监视文件变化，自动执行任务
gulp.task('watch', function(){
gulp.watch(from, ['convertJS']);
})
gulp.task('start', ['convertJS', 'watch']);
7、扩充watch。上面的文件只要运行gulp watch 就可以监听文件变化了。其实watch方法监控时会触发change事件，如果我们希望在change的时候进行其他操作的话，只要写在change的回调函数中就可以。
let watcher = gulp.watch(from,['watch'])； watcher.on('change', function(event){ console.log('File' + event.path + 'was' + event.type + ', running tasks...') })
三、错误
都写好后运行gulp watch，报错如下，说明babel相关模块没安装，同样是用npm安装babel-preset-es2015（es6转es5）和babel-preset-react（react）
如果上面方法还没有解决,可能是路径找错了,gulpfile建议放在根目录下,如要将resource-morden中的文件转义到resource中,将gulpfile.js放在与这两个文件夹同级的目录下.
再补充个项目结构图:appes6中是要转码的文件,app中是转码完成的文件夹
四、荐读
1、gulp的github地址，有API文档介绍，多种语言 https://github.com/gulpjs/gulp/tree/master/docs
2、gulp官网，plugins中有插件介绍 http://gulpjs.com/ http://gulpjs.com/plugins/
3、gulp源码解析，偶然间看到的，没看懂，应该还不错，先记下来说不定以后会看到，目前有三篇，可以都看下 http://www.cnblogs.com/vajoy/p/6349817.html