从零开始：现在开始用ES6写代码

ES6（ECMAScript6.0）早在2015年便发布了第一个版本，所以又被称作ECMAScript2015。

作为已经正式发布的新版本，取代ES5是毋庸置疑的趋势，但鉴于浏览器的历史遗留问题，在生产线上我们还是需要一些工具来转换成ES5使其兼容旧版本的浏览器。

下面来介绍一下使用Gulp+Babel进行ES6开发环境的部署：

（操作很简单，写的比较详细所以字数比较多，别被吓退了哈，而且大部分配置都是一劳永逸，多个项目都可以通用，哈哈）

1. 安装 NodeJS

   既然使用Gulp跟Babel肯定少不了NodeJS，NodeJS各个平台均有对应的一键安装包，简单方便又省心！
   
   安装完成后打开命令行，分别输入

   $ npm -v
   
   $ node -v

   出现如下输出就代表安装成功了（这里我用的是Git Bash，推荐使用，安装Git自带）
   

2. 初始化NPM配置

   在项目文件夹根目录，执行

   $ npm init

   
   按照提示填好，除了name和version字段其他都是选填项，一路回车就OK了
   最后项目根目录会出现一个package.json的配置文件，多数情况不会手动去修改，安装依赖时NodeJS会自动读写这个配置文件。

   国内由于众所周知的原因NPM安装源访问的速度十分缓慢，建议使用如下命令更改为某宝的NPM镜像：
   $ npm config set registry https://registry.npm.taobao.org/

3. 安装 Gulp

   1. 首先 全局 安装Gulp

      $ npm install -g gulp

      安装过程可能出现一些警告，不用理他，最后执行

      $ gulp -v

      
      只要正确输出了版本号就OK了。

   2. 然后在项目根目录安装 开发依赖：

      $ npm install --save-dev gulp

      许多小伙伴会疑惑这两种安装方法有什么差别，其实很简单，全局安装的一般是需要直接在命令行中使用的命令，比如这里的gulp：
      $ gulp taskName
      全局安装之后就可以直接在命令行中使用这样的命令来执行Gulp任务。
      而在项目根目录安装的开发依赖则是在项目根目录中的 node_modules 目录中放入模块的文件，可以直接在项目中通过require()来引入的模块。

4. 安装 Gulp & Babel 相关插件

   1. 首先安装 gulp-babel ：

      $ npm install --save-dev gulp-babel

   2. 安装转码包：

      $ npm install --save-dev babel-preset-latest

      我这里安装了最新版本的转码包，这个转码包支持ES2017（Stage3）&ES2016&ES2015语法的转换。
      如果你只想使用正式推出的ES6（ES2015），则可以仅安装ES6的转码包：
      $ npm install --save-dev babel-preset-es2015

      Babel转码配置：

      $ echo '{ "presets": ["latest"] }' > .babelrc

      也可以手动在项目根目录创建 .babelrc 文件进行配置；
      仅转换ES6的小伙伴将命令中的 latest 换成 es2015 就OK了。

   3. 安装 gulp-watch：

      $ npm install --save-dev gulp-watch

      gulp-watch 用于实时监控文件变化实时编译文件，这样就不用每次写完代码再去手动运行gulp任务编译文件了，也是懒人必备！

5. 配置 Gulp

   终于到最后一步了，哈哈，具体配置如下图，写了比较详细的注释了：
   
   保存到项目根目录的 gulpfile.js 文件就好了。
   最后在项目根目录执行：

   $ gulp

   即可运行默认任务（任务名为 default）

赶快写个ES6语法试试吧~↖(^ω^)↗

初入前端，粗写几字，如有不足，还望指正，谢谢。

共勉。

-END

所有文章非特别说明皆为原创。技术更迭迅猛，部分内容可能会作修改，为保证信息与源同步，转载时请务必注明文章出处！谢谢合作 :-)