Babel 為編譯 ES6 的工具

那我們就要開始介紹如何安裝與使用啦

https://www.npmjs.com/package/gulp-babel

npm install gulp-babel gulp-sourcemaps gulp-concat --save

輸入

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


gulp.task('default',['jade','sass','babel','watch']);

這時候輸入 gulp 可能會出現你沒有bable-core
所以必須在

npm install --save @babel/core @babel/preset-env

這時候在source 資料夾分別新增 all.js 與 all2.js
all.js

var Fn = function Fn() {
  console.log('a');
};

all2.js

var Fn2 = function Fn() {
  console.log('a');
};

輸入 gulp 會發現它分別編譯兩支 js檔案出來

但這對效能不太友善

所以我們必須將這兩支 js 檔案 合併再一起

解決方法為
加上

.pipe($.concat('all.js'))

加上後的結果

gulp.task('babel', () =>
    gulp.src('./source/js/**/*.js')
        // .pipe(sourcemaps.init())
        .pipe($.babel({
            presets: ['@babel/env']
        }))
        .pipe($.concat('all.js'))
        // .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./public/js'))
);

這樣再次輸入gulp 就會發現它們合併成一支 js檔案啦~~

那今天的介紹就到這裡
若有任何問題 或 內容有誤
都可以跟我說唷