這是在講 Gulp 不是飲料是任務自動化工具這件事：安裝 Babel 篇

前言

接下來將會安裝 Bebal 這個套件工具，這個套件工具可以幫助我們將 ES6 編譯成瀏覽器可以執行的 JavaScript

ES6

首先 ES6 是 ECMAScript 的縮寫，而數字代表的是版本號， ES6 則是 2015 年 6 月發布，所以又稱為 ES 2015，如果想瞭解更多可以看這一篇文章

安裝 gulp-babel

首先官方文件中提供兩個版本的 bebal，基本上使用上沒有太大差異，所以我是選擇安裝 Babel 7

// Babel 7
npm install --save gulp-babel @babel/core @babel/preset-env

// Babel 6
npm install --save gulp-babel@7 babel-core babel-preset-env

使用方式

使用的方式也是很簡單，但是我們要先建立一個 gulp 任務

gulp.task('babel', () => {
  return gulp.src('./src/js/**/*.js')
  .pipe(gulp.dest('./public/js'));
});

並且建立 js 資料夾跟檔案

接下來只需要依照官方文件撰寫任務即可

gulp.task('babel', () => {
  return gulp.src('./src/js/**/*.js')
    .pipe($.babel({
      presets: ['@babel/env']
    }))
    .pipe(gulp.dest('./public/js'));
});

最後在 JS 中寫入一些 ES6 的語法，並輸入 gulp babel

let a = () => console.log('小明好棒');

const b = 1234;

setTimeout(() => {
  console.log('123 站著穿');
},5000);

編譯完成後我們就可以看到 ES6 語法被轉換囉~