Node.js:Gulp 套件協助將 JavaScript 合併、壓縮與命名,將 JS 封裝吧!

2019/04/02 1,019 2 網站技術 , JavaScript , Node.js , Gulp

《上一篇:Node.js:Gulp 運行 gulp-clean-css,批次壓縮 CSS》我們已經瞭解到如何將 CSS 壓縮成較小的檔案啦!這篇文章我們要更完整的敘述封裝檔案這件事情,不過由於 CSS 已經說過了,這次就用 JavaScript (以下簡稱「JS」)來說明啦!

開發網頁時,我們常常要引入大量的 JS 插件,導致要求量增加,網頁載入速度變慢,因此我們為了減少要求量,需要把多個 JS 合併成一個,然後先輸出一個合併 JS 檔,接著再進行最小化壓縮,再輸出一個檔名尾巴叫做 min.js 的最終使用檔案,這樣就完成網站的 JavaScript 封裝啦!網頁最後要用的就是 min.js 這個最終檔唷!

前面很多篇都還一步步教學使用 Yarn 安裝套件的方法,從此篇開始就不再贅述,直接告訴你要安裝的套件啦!

🗂 本文要使用的套件(請使用 Yarn 安裝套件):
「gulp」是一切的基礎,用來處理工作流程!任務管理器的用途。安裝教學請看本文
「gulp-concat」用來合併檔案,不管是 JavaScript 還是 CSS 封裝都是必備的工具!安裝指令:yarn add gulp-concat
「gulp-uglify」用來壓縮 JavaScript 檔案。安裝指令:yarn add gulp-uglify
「gulp-rename」用來重新命名檔案。安裝指令:yarn add gulp-rename

這次示範專案目錄是在使用者目錄下的「mnya」,請先將要處理的 JS 與相關目錄建立完成,本文使用以下路徑:

C:\Users\user\mnya
├─📝 gulpfile.js
├─📝 package.json
..├─📁 src
....├─📁 js
......├─⚙ 輸入1.js
......├─⚙ 輸入1.js
~~~~~~省略~~~~~~
......└─⚙ 輸入∞.js
..├─📁 build
....├─📁 js
......├─⚙ 輸出.js
......└─⚙ 輸出.min.js

這次我們會用到之前提過的建構路徑物件與 Gulp 自動監看執行技巧來撰寫「gulpfile.js」工作流程檔。

▲ 最前頭先做套件定義,將四個需要用到的套件都設定好變數。接著定義路徑,這邊設定src/js/*.js為輸入路徑與指定檔案,build/js/為輸出路徑。最後來建構工作,先用gulp.src(paths.script.src)變數呼叫將輸入路徑設定導入,接著將多個檔案合併成script.js,先輸出一份合併檔,接著設定檔名script.min.js,呼叫uglify()進行 JS 壓縮,最後輸出到輸出路徑。

▲ 監看工作這邊也要記得加入,括弧內左為監看路徑、右為變動時要執行的工作,最後輸出工作請記得先跑一次工作再執行監看工作!
【執行】完成「gulpfile.js」並存檔後即可輸入指令gulp執行!
【監看】首次執行完成後進入監看模式,這時指令路徑若有任何變動都將使指定工作再做一次,達到即時更新的效果!
【輸出目錄】我們已經有兩個輸出的 JS 檔囉!上面的是單純合併的 JS 檔,下面的是合併與壓縮都有做的版本,將是最後上傳伺服器使用的 JS 檔!

「gulpfile.js」原始碼:

//  套件定義
//  在 package.json 內引用的套件

const gulp = require('gulp');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');

// 定義路徑

const paths = {
  script: {
    src: 'src/js/*.js',
    dest: 'build/js/'
  },
};

// 建構工作

const buildScript = async function (cb) {
  console.log('buildScript');
  gulp.src(paths.script.src)
      .pipe(concat('script.js'))
      .pipe(gulp.dest(paths.script.dest))
      .pipe(rename('script.min.js'))
      .pipe(uglify())
      .pipe(gulp.dest(paths.script.dest));
  cb();
}

// 監看工作

const watchFiles = async function () {
  gulp.watch(paths.script.src, buildScript);
}

// 輸出工作

exports.default = gulp.series(buildScript, watchFiles);


▲ 由此圖可以比較兩者間的差異,壓縮後不管是註解、跳行和空格都會被移除,而且會稍加排序變得難以讀懂,不過請注意!JS 終究是明碼,壓縮只是為了讓檔案更小,並沒有保護作用,因為我們可以很輕易地使用程式美化原始碼。

好了!相信你已經能做到 JS 的封裝,之後還有更多項目要實作呢!一起加油!我們下一篇見!跟著萌芽站長一起進步!🥰

《下一篇:尚未發表》

Node.js 系列教學文章

贊助廣告 ‧ Sponsor advertisements

留言區 / Comments

萌芽論壇