這篇文章是《Node.js:Gulp 運行 imagemin-mozjpeg,mozjpeg 批次圖片壓縮》的延伸篇,這次來探討如何運用建構路徑物件的方式來方便管理 Gulp 的工作流程檔「gulpfile.js」,再來講 Gulp 提供的監看功能,只要來源目錄有任何檔案更動,就會自動重新執行指定工作,如:mozjpeg 圖片壓縮,節省打指令的時間!最後運用批次檔的方式就完全不用打指令啦!點開就像開啟程式一樣簡單,接著就是讓程式自動執行,不需要使用時關閉即可,非常方便!
▲「gulpfile.js」中的const paths
用來建構一個物件來存放路徑,以後只要從這邊修改路徑,就不需要動到建構工作的區塊啦!
▲ 監看gulp.watch
是由 Gulp 套件提供的功能,方法內格式為(偵測指令路徑變動, 變動就執行的工作)
。輸出工作時請記得最後加上監看工作watchfiles
,這樣就會自動偵測目錄變動以執行指定工作。如果以後不想手動使用終端機(命令提示字元)打指令,可以記事本輸入gulp
並存成 .bat 的批次檔於專案根目錄中,這樣以後只要雙擊就可以啟動程式!
本文「gulpfile.js」原始碼:
// 套件定義
// 在 package.json 內引用的套件
const gulp = require('gulp');
const imagemin = require('imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');
// 定義路徑
const paths = {
imagemin: {
src: 'src/*.jpg',
dest: 'build/'
},
};
// 建構工作
const mozjpeg = async () => {
await imagemin([paths.imagemin.src], paths.imagemin.dest, {
use: [
imageminMozjpeg({
quality: 85
})
]
});
console.log('Images optimized');
};
// 監看工作
const watchfiles = async function () {
gulp.watch(paths.imagemin.src, mozjpeg);
}
// 輸出工作
exports.default = gulp.series(mozjpeg, watchfiles);
Node.js 真的有無限可能,幫我們自動處理繁瑣的事情,超方便!😉
《延伸篇:Node.js:jpg、jpeg、JPG、JPEG 通通不遺漏的進行壓縮(Gulp、mozjpeg 批次圖片壓縮 - 延伸篇)》
Node.js 系列教學文章
- Node.js:Webpack 封裝 CSS、SCSS 成單一 JS 教學(使用 VS Code) 2019-08-19萌芽站長
- Node.js:Gulp 運行 Autoprefixer,批次處理 CSS 供應商前綴問題 2019-03-27萌芽站長
- Node.js:Yarn 專案初始化、gulp.js 任務管理工具安裝與使用 2019-03-24萌芽站長
- Node.js:Gulp 套件協助將 JavaScript 合併、壓縮與命名,將 JS 封裝吧! 2019-04-02萌芽站長
- nvm-windows:Windows 平台的 Node.js 版本管理工具,可安裝、切換和管理多個 Node.js 版本 2024-06-26萌芽站長
- Node-RED:將資料寫入至 MSSQL 資料庫中的資料表 2021-12-07萌芽站長
- Node-RED:Dashboard 使用 button 和 ui control 切換 tab 2021-12-28萌芽站長
- Windows 環境安裝 Node.js 以及 npm & Yarn 兩款熱門 JavaScript 套件管理程式 2019-03-24萌芽站長
- Node-RED:啟用使用者身分驗證、建立帳號密碼以保護資訊安全 2021-11-18萌芽站長
- Node-RED:製造亂數顯示到儀表板的小練習 2021-10-12萌芽站長
- Node.js:Gulp 運行 gulp-clean-css,批次壓縮 CSS 2019-03-28萌芽站長
- 使用 Docker 更新 Node-RED 教學 2021-12-08萌芽站長
- Node.js:jpg、jpeg、JPG、JPEG 通通不遺漏的進行壓縮(Gulp、mozjpeg 批次圖片壓縮 - 延伸篇) 2019-09-30萌芽站長
- Node.js:Webpack 基礎概念與 JS 封裝過程教學(使用 VS Code) 2019-08-19萌芽站長
- Node-RED:透過流程圖視覺化串接資料、強大的 IoT 開發工具 2021-10-10萌芽站長
- 使用 Docker 安裝及運行 Node-RED 教學 2021-12-08萌芽站長
- Node.js:Gulp 運行 imagemin-mozjpeg,mozjpeg 批次圖片壓縮 2019-03-26萌芽站長
- Node-RED:讀取及查詢 MySQL 資料庫中的資料表 2021-11-18萌芽站長
- Node.js:Gulp 運行 gulp-connect 套件,建立前端開發伺服器(Gulp 大展身手!) 2019-03-25萌芽站長
- Node.js:處理多層目錄檔案(Gulp、mozjpeg 批次圖片壓縮 - 延伸篇) 2019-03-30萌芽站長
留言區 / Comments
萌芽論壇