babel命令会从配置文件中读取配置，来变异code/目录下的文件，并把转义之后的JavaScript文件导出到build/目录下。还有命令行里的参数-w，这个命令参数指定的是watch，每次code目录的文件修改后都会触发babel命令的再次执行。
在文件中使用Source Maps
上面看起来很不错了。但是还有一个问题，在你调试代码的时候，你调试的实际是babel命令转码之后的js，不是原来你编写的源代码所在的文件。调试的不是源文件，多少会有些不便。比如下面的文件会抛出一个异常：
async function errorAsyncFunc() { try{ throw new Error('Async function error') } catch(e) { throw e } } errorAsyncFunc()
在转码命令中加一个--source-maps可以解决这个问题：
babel code/ -d build/ --source-maps
最后在package.json里添加scripts节点：
"scripts": { "build": "babel src -d build --source-maps", "start": "node build/index.js" },
接下来：
npm run build
Gulp出场
上文讲述了如何使用Babel实现ES201x的开发。但是在正式的开发中，上面的这些配置还略显不足，尤其是你的项目包括web端、server端，尤其web端不仅处理ES201x的代码还需要处理。所以需要Gulp出场。
这玩意儿看起来很复杂，你定义了编译的过程。其实掌握了以后很好用，尤其是可以自动处理很多东西，节约大把时间。要使用Gulp，必须先安装NodeJS。这个基本是标配。然后你会用到它的命令行工具。
安装Gulp
在最新发布的Gulp里有一点调整。gulp-cli从gulp分离出来作为单独的一部分使用。所以，如果你已经安装过gulp之前的版本需要先删除：
npm rm --global gulp
安装gulp-cli
yarn global add gulp-cli // npm install --global gulp-cli
在--dev模式下安装gulp
yarn add gulp --dev // npm install --save-dev gulp
创建gulp配置文件
就像Babel要用.babelrc作为配置文件一样，gulp也需要一个配置文件。这个配置文件就是gulpfile.js, 但是和babel同用的情况下把gulpfile.js重命名为gulp.babel.js：
mv "gulpfile.js" "gulpfile.babel.js"
gulp的使用还是很简单的，主要就是在gulpfile.babel.js文件中添加各种task。在这些task中一定要添加一个叫做default的task，gulp命令的执行起点就是从这里开始。
假设有这么一个场景：
1.使用eslint检查代码，发现代码风格和潜在的错误。
2.自动实现ES201x -> ES5的代码转码，并把转码后的代码放在指定目录下。
3.在转码的时候添加sourcemaps。
以上这些“任务”都是用gulp自动实现。该如何配置呢？
gulp和eslint
要在gulp中使用各种请他的类似于eslint这样的功能的时候需要使用在gulp上的对应的插件。没错，gulp的设计思路和gulp基本一样：插件机制。
那么我们就需要首先下载eslint的插件：
yarn add --dev gulp-eslint // npm install --save-dev gulp-eslint
在开始编写我们的第一个task之前, 做最后的准备工作。首先需要配置.eslintrc文件。eslint会根据这个文件定义的规则检查代码的风格。我们不准备大批的配置规则，这样非常耗时间而且也照顾不到很多我们项目已经保留下来的编码风格。所以，airbnb的一套规则拿来使用时最好的办法。
安装eslint
yarn add --dev eslint // npm install --save-dev eslint
然后你可以运行命令来初始化配置：./node_modules/.bin/eslint --init。你也可以忽略这个命令，直接创建一个.eslintrc的文件。
安装eslint的airbnb扩展
要使用airbnb的一套规则就需要安装他们的eslint扩展：
复制代码 代码如下:
yarn add eslint-config-airbnb --dev // npm install --save-dev eslint-config-airbnb
命令执行之后会提示有些依赖项没有安装，分别是eslint-plugin-import@^2.2.0、eslint-plugin-import@^2.2.0、eslint-plugin-jsx-a11y@^3.0.2。依次安装这些依赖项就好。
.eslintrc
{ "env": { "es6": true }, "rules": { "semi": "off", "import/no-extraneous-dependencies": ["error", { "devDependencies": true, "optionalDependencies": false, "peerDependencies": false }] ,"quotes": ["error", "single", {"allowTemplateLiterals": true}] }, "extends": "airbnb" }