Node.js:建構路徑物件、自動監看執行、批次檔小技巧(Gulp、mozjpeg 批次圖片壓縮 - 延伸篇)

2019/03/31 951 0 多媒體 , 網站技術 , JavaScript , Node.js , 靜圖處理 , Gulp

這篇文章是《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 系列教學文章

贊助廣告 ‧ Sponsor advertisements

留言區 / Comments

萌芽論壇