gulp+Babel ES6初体验

** 新建项目文件夹 **
mkdir gulp-es6-demo

** 进入项目文件夹 **
cd gulp-es6-demo

** 创建src文件夹和dist文件夹 **
mkdir src dist

** 初始化项目得到package.json文件 **
cnpm init

** 安装babel-cli babel-preset-env **
npm install –save-dev babel-cli babel-preset-env

** 创建babel配置文件.babelrc **
windows下新建该文件会提示必须键入文件名，解决办法是文件名如下.babelrc.
将规则加入到.babelrc文件中

1
2
3

{
  "presets": ["env"]
}

** 安装gulp gulp-babel gulp-watch **
npm install –save-dev gulp gulp-babel gulp-watch

** 创建gulpfile.js文件 **
将以下内容加入到gulpfile.js中

var gulp = require("gulp"),  
    babel = require("gulp-babel"), 
    watch = require("gulp-watch");  

gulp.task("babeljs", function () {  
return gulp.src("src/js/*.js")  
 .pipe(babel())  
 .pipe(gulp.dest("dist/js"));  
});  
gulp.task("watch",function(){
gulp.watch('src/js/*.js',['babeljs']);
})

gulp.task('default',['watch','babeljs']);

至此所有工具都已经安装好并且配置好了。下面来写一段es6试试

在src下，新建js文件夹并且新建demo.js。并输入如下内容：

1	[1,2,3].map(n => n + 1);

** 运行实现转码 **
gulp
我们可以看到在dist下生成了 dist/js/demo.js 文件，打开内容如下：

"use strict";

[1, 2, 3].map(function (n) {
  return n + 1;
});