学习记录：gulp babel 的使用

babel

babel 主要是用来编译 ES5 以上的 JavaScript 新特性，可以把 ES6 编译成 ES5 或 ES3 的语法，可以在 IE9, IE8 等低版本的浏览器流畅运行。

• babel 的插件

babel-preset-es2015babel-core

babel-preset-es2015 （babeljs） 编译 JavaScript 的特性是有范围的
这两个依赖是一定需要

• .babelrc
  还有增加 .babelrc 这个文件

// .babelrc{  "presets": ["es2015"]}

gulp

gulp 的底层是用 nodejs 实现的，gulp 处理文件的方式也是通过 stream 的方式，擅长处理集联任务，官方文档就说他就是增强工作流的一个工具。gulp 通过 stream 的传输文件，配合插件处理文件，实现任务自动化的方式来增强工作流程
api:

• gulp.src
• gulp.dest
• gulp.watch
• gulp.task

gulp.src 代表需要处理的文件
gulp.dest 代表需要把处理好的文件转移到指定的位置
gulp.watch 代表需要监听的文件的变化
gulp.task 代表我们创建的任务

gulp babel 实战

使用 es6 写 gulp,
在 gulp 中是使用 gulp-babel 来处理 我们的 JavaScript 文件
需要的依赖

npm i  gulp gulp-babel babel-preset-es2015 babel-core --save-dev

• gulpfile.babel.js 替换 gulpfile.js

// gulpfile.babel.jsimport gulp from 'gulp'import babel from  'gulp-babel'gulp.task('babel', () => {  gulp.src('src/main.js')    .pipe(babel())    .pipe(gulp.dest('dist'))})gulp.task('html', () => {  gulp.src('src/index.html')    .pipe(gulp.dest('dist'))})gulp.task('default', ['html', 'babel'])

在终端中输入 gulp 就会执行 html babel 两个任务处理对应的文件

参考：
babel：https://babeljs.cn
gulp：https://gulpjs.com/