Gulp 是基於 Node.js 的任務自動化管理工具

按照腳本一個任務一個任務的依序做完

接下來直接用畫面帶實際操作

目標是要

• 可以幫我執行 babel 把 ES6+ 編譯成 ES5
• 可以幫我執行 uglify 把 js 給壓縮並混淆
• 可以幫我改檔案名稱 .js -> .min.js
• 可以幫我改 html 內 script 標籤的程式碼

開個空白的新資料夾

然後建立管理 npm 套件的 package.json

npm init -y

然後下載 gulp 要用來編譯用的東西

npm i -D gulp gulp-rename gulp-html-replace gulp-uglify
npm i -D gulp-babel @babel/core @babel/preset-env

講解一下剛剛載的那些東西是什麼

gulp：執行自動化任務腳本的核心函式庫

gulp-rename：提供檔案重新命名函式

gulp-html-replace：replace html 的程式碼

gulp-uglify：壓縮混淆 js 的程式碼

gulp-babel：編譯 ES6+ 的函式庫

@babel/core：Babel compiler core

@babel/preset-env：官方提供的編譯 ES6+ 懶人包

在根目錄新建一個 src 目錄

在根目錄設置 gulpfile.js

const { src, dest, parallel } = require('gulp');
// * src (source 來源)
// * dest (destination 目的地)
// * parallel (平行處理)
const rename = require('gulp-rename'); // 檔案重命名
const htmlreplace = require('gulp-html-replace'); // html 程式碼取代
const uglify = require('gulp-uglify'); // 壓縮混淆 JS
const babel = require('gulp-babel'); // 編譯 ES6+
 
const jsBabelUglifyRename = () => src('./src/js/**/*.js')
  .pipe(babel({
    presets: ['@babel/preset-env'],
  }))
  .pipe(uglify())
  .pipe(rename((renamePath) => {
    Object.assign(renamePath, {
      basename: `${renamePath.basename}.min`,
      extname: '.js',
    });
  }))
  .pipe(dest(`./dist/js/`, { sourcemaps: '.' }));
 
const htmlReplace = () => src('./src/*.html')
  .pipe(htmlreplace({
    js: {
      src: [
        ['js/test.min.js'],
      ],
      tpl: '<script src="%s"></script>',
    },
  }))
  .pipe(dest(`./dist/`));
 
exports.default = parallel(jsBabelUglifyRename, htmlReplace);

source code： https://github.com/littlehorseboy/gulp-test

gulp 就是用這種非常彈性的方式自定義編譯的任務腳本

只要指定好來源，目的，用什麼工具編譯等等

就能用它來一鍵打包

接下來要來介紹另一個打包工具 webpack

我認為毫無疑問的，它就是前端界最猛的打包工具

https://github.com/webpack/webpack

不過在看 webpack 之前一定要先了解 ES Module

tags: 前端

下一章： ES Module