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

#Node.js #Gulp #Gulp 4 #這是在講 Gulp 不是飲料是任務自動化工具這件事

前言

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

安裝 gulp-concat

首先要安裝 gulp-concat

1	`npm install --save gulp-concat`

使用方式

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

all

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

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

整理這些技術筆記真的很花時間，如果你願意 關閉 Adblock 支持我，我會把這份感謝轉換成更多「踩坑轉避坑」的內容給你！ヽ(・∀・)ﾉ

你的支持會直接轉換成更多技術筆記

如果我的筆記讓你少踩一個坑、節省 Debug 的時間，
也許你可以請我喝杯咖啡，讓我繼續當個不是 Array 的 Ray ☕

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

前言

安裝 gulp-concat

使用方式

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

分享這篇文章

留言

前言

安裝 gulp-concat

使用方式

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

這是在講 Gulp 不是飲料是任務自動化工具這件事之番外篇：將 Gulp deploy(部屬) Heroku

這是在講 Gulp 不是飲料是任務自動化工具這件事：一個段落

這是在講 Gulp 不是飲料是任務自動化工具這件事之番外篇：加入 ejs 篇

這是在講 Gulp 不是飲料是任務自動化工具這件事之番外篇：加入 pug/jade 篇

分享這篇文章

留言