這是在講 Gulp 不是飲料是任務自動化工具這件事:多個 JS 合併篇

前言

有時候我們會將 JavaScript 分成數個檔案來寫,但是實際開發環境下是只會載入一隻,所以這邊紀錄一下該如何透過 Gulp 來合併 js 檔吧!

安裝 gulp-concat

首先要安裝 gulp-concat

1
npm install --save gulp-concat

使用方式

基本上使用方式很簡單,在這邊我也會順便將 sourcemap 也加入,但是在那之前為了要看出效果,所以我們寫兩個 js 檔,分別為 a.js、b.js,之後在透過 gulp 合併成一個 all.js

all

接下來可以依照官方文件修改 task

1
2
3
4
5
6
7
8
9
10
11
gulp.task('babel', () => {
return gulp.src('./src/js/**/*.js')
.pipe($.sourcemaps.init())
.pipe($.babel({
presets: ['@babel/env']
}))
.pipe($.concat('all.js'))
.pipe($.sourcemaps.write('.'))
.pipe(gulp.dest('./public/js'));
});

最後輸入 gulp babel 就可以看到結果囉~

gulp babel

Liker 讚賞 (拍手)

如果這一篇筆記文章對你有幫助,希望可以求點支持或 牡蠣 鼓勵 (ノД`)・゜・。

Liker 是一個按讚(拍手)的讚賞機制,每一篇文章最多可以按五下(拍手),按讚過程你是完全不用付費的(除非你想要每個月贊助我 :D),你只需要登入帳號就可以開始按讚。
而 Liker 會依據按讚數量分配獎金給創作者,所以如果你願意按個讚我會非常感謝你唷。

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ