《上一篇: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 系列教學文章
- Node.js:Gulp 運行 Autoprefixer,批次處理 CSS 供應商前綴問題 2019-03-27萌芽站長
- Node-RED:啟用使用者身分驗證、建立帳號密碼以保護資訊安全 2021-11-18萌芽站長
- Node.js:Gulp 運行 imagemin-mozjpeg,mozjpeg 批次圖片壓縮 2019-03-26萌芽站長
- Node-RED:製造亂數顯示到儀表板的小練習 2021-10-12萌芽站長
- Node-RED:透過流程圖視覺化串接資料、強大的 IoT 開發工具 2021-10-10萌芽站長
- Node-RED:Dashboard 使用 button 和 ui control 切換 tab 2021-12-28萌芽站長
- 使用 Docker 更新 Node-RED 教學 2021-12-08萌芽站長
- Node.js:Webpack 封裝 CSS、SCSS 成單一 JS 教學(使用 VS Code) 2019-08-19萌芽站長
- 使用 Docker 安裝及運行 Node-RED 教學 2021-12-08萌芽站長
- Node.js:Yarn 專案初始化、gulp.js 任務管理工具安裝與使用 2019-03-24萌芽站長
- nvm-windows:Windows 平台的 Node.js 版本管理工具,可安裝、切換和管理多個 Node.js 版本 2024-06-26萌芽站長
- Node-RED:將資料寫入至 MSSQL 資料庫中的資料表 2021-12-07萌芽站長
- Node.js:Gulp 運行 gulp-connect 套件,建立前端開發伺服器(Gulp 大展身手!) 2019-03-25萌芽站長
- Windows 環境安裝 Node.js 以及 npm & Yarn 兩款熱門 JavaScript 套件管理程式 2019-03-24萌芽站長
- Node.js:處理多層目錄檔案(Gulp、mozjpeg 批次圖片壓縮 - 延伸篇) 2019-03-30萌芽站長
- Node.js:建構路徑物件、自動監看執行、批次檔小技巧(Gulp、mozjpeg 批次圖片壓縮 - 延伸篇) 2019-03-31萌芽站長
- Node.js:jpg、jpeg、JPG、JPEG 通通不遺漏的進行壓縮(Gulp、mozjpeg 批次圖片壓縮 - 延伸篇) 2019-09-30萌芽站長
- Node.js:Webpack 基礎概念與 JS 封裝過程教學(使用 VS Code) 2019-08-19萌芽站長
- Node-RED:開啟專案(項目)功能與建立首個新專案 2021-12-02萌芽站長
- Node.js:Gulp 運行 gulp-clean-css,批次壓縮 CSS 2019-03-28萌芽站長
留言區 / Comments
萌芽論壇