本地实现ES6转ES5代码——gulpfile配置文件

　　公司里不少同事在用ES6实现业务逻辑了，我也想试试。在公司的项目里，我写的ES6只要打开命令窗输入gulp watch 就自动将ES6转成ES5并放在相应的文件夹里了。我回家也想练习，但又不知道该怎么转，用在线的babel我就只能每写一个文件都要上去手动转换一次，不高兴这样作。因此我就想本身搭建一个公司项目那样的环境，几番查阅对比，终于知道用一个gulpfile配置文件就能够实现了。记录下实现历程：

1、介绍下Gulp

gulp和grunt同样是个项目构建工具。gulp的核心在于流式操做和简单的API，能够自动执行指定的任务好比编译、压缩等，方便且高效。

2、实战：安装并完成gulpfile文件

一、安装node

二、切换到工做目录，打开命令窗运行“npm init”输入参数，该目录下会生成一个package.json文件，里面包含刚刚输入的参数。（个人参数全用的默认的，没有单独修改）

三、安装gulp。命令以下， --save-dev会把安装的都写入package.json文件中。

npm install gulp --save-dev

四、安装gulp插件（目前有18个），刚开始并不知道要安装哪些插件，因此乱七八糟的看着公司项目里有的就都安上了，后来发现其实不少是用不到的。安装插件命令以下，不一样插件只需修改插件名便可。

npm install gulp-babel --save-dev　　//安装babel转码插件
npm install gulp-plumber gulp-replace --save-dev　　//安装多个插件，插件间用空格分隔便可

五、新建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');
})

六、完成的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']);

七、扩充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...')
})

 3、错误

都写好后运行gulp watch，报错以下，说明babel相关模块没安装，一样是用npm安装babel-preset-es2015（es6转es5）和babel-preset-react（react）

 若是上面方法尚未解决,多是路径找错了,gulpfile建议放在根目录下,如要将resource-morden中的文件转义到resource中,将gulpfile.js放在与这两个文件夹同级的目录下.

再补充个项目结构图:appes6中是要转码的文件,app中是转码完成的文件夹

 

 

4、荐读

一、gulp的github地址，有API文档介绍，多种语言　　https://github.com/gulpjs/gulp/tree/master/docs

二、gulp官网，plugins中有插件介绍　　　　　　　　 http://gulpjs.com/　　http://gulpjs.com/plugins/

三、gulp源码解析，偶然间看到的，没看懂，应该还不错，先记下来讲不定之后会看到，目前有三篇，能够都看下　　http://www.cnblogs.com/vajoy/p/6349817.html