把 CSS 處理完後，終於輪到 JS 了。在這個專案中，index.html 有引入兩支 JS：verdor.js、all.js。其中，bundle.js 是用來合併第三方的 JS 套件，例如 jQuery 或 Bootstrap 需要的 JS 檔案；all.js 則是自己寫的 JS。

在 gulp 的處理中，vendor.js 只是單純的把第三方 JS 套件合併起來而已。而 all.js 則是會經過 babel 處理、合併、壓縮，最後才變成 all.js。接下來開始列出操作步驟：

一、先安裝需要的套件

npm install --save-dev gulp-concat # 合併檔案用
npm install --save-dev @babel/core # 能在 JS 中使用 babel 提供的 API。在 gulpfile 中會被 gulp-babel 間接使用
npm install --save-dev @babel/preset-env # 支援將最新的 ES 版本轉成 ES5
npm install --save-dev gulp-babel # 調用 babel，能在 pipe 中使用

npm install jquery # 該專案有用到 jquery

二、編寫 verdorJS、babel 這兩支 task。前者用來合併第三方 JS 套件、後者將自己編寫的 ES6 轉碼成 ES5

import gulp from "gulp"
const $ = require("gulp-load-plugins")()

export function vendorJS() {
  return gulp
    .src([
      "./node_modules/jquery/dist/jquery.slim.min.js",
      "./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
    ])
    .pipe($.concat("vendor.js"))
    .pipe(gulp.dest("./public/javascripts"))
}

export function babel() {
  return gulp
    .src("./source/javascripts/**/*.js")
    .pipe($.sourcemaps.init()) // 前幾天談到的 gulp-sourcemaps 
    .pipe(
      $.babel({
        presets: ["@babel/env"]
      })
    )
    .pipe($.concat("all.js"))
    .pipe(        
      $.uglify({
          compress: {
            drop_console: true
          }
        }))
    .pipe($.sourcemaps.write("."))
    .pipe(gulp.dest("./public/javascripts"))
}

三、添加 babel 要轉碼的配置

// 新增 .babelrc，添加如下設定，babel 會自動讀取
{
  "presets": ["@babel/preset-env"],
  "retainLines": true
}

四、在 CLI 界面下使用這兩支 task

> tree .

├── gulpfile.babel.js
├── package.json     
├── README.md        
└── source/
    ├── images/
    ├── index.html
    ├── javascripts/
    │   └── all.js
    ├── stylesheets/
    │   ├── all.scss
    │   ├── components/
    │   ├── helpers/
    │   └── pages/
    └── test.html

> gulp vendorJS
> gulp babel
> tree .

├── gulpfile.babel.js
├── package.json
├── public/
│   └── javascripts/
│       ├── all.js
│       ├── all.js.map
│       └── vendor.js
├── README.md
└── source/
    ├── images/
    ├── index.html
    ├── javascripts/
    │   └── all.js
    ├── stylesheets/
    │   ├── all.scss
    │   ├── components/
    │   ├── helpers/
    │   └── pages/
    └── test.html

最後就會發現，public/javascripts 資料夾底下多了 vendor.js 與 all.js 這兩支檔案。

小結

今天是「JS 的處理」系列的第一天，示範了 JS 的基本處理。明天將會介紹 gulp-concat 套件。