微信小程序less自動轉wxss

看到標題，是否是有點小激動。。。 不要急，不要急，咱們先來安裝一波所需依賴 (less 和 child-process)

在項目的根目錄建立一個 changeLess.js文件。代碼以下:

const fs = require('fs')
const childProcess = require('child_process'); //這邊記得下劃線，用「child-process」可能會報錯

const watchDirs = ['./pages', './components'] //須要監聽的文件目錄

/**
 * less自動生成wxss文件。讓「切圖仔們「code起來更爲優雅
 * 
 */
const changeLessToCss = () => {
  watchDirs.map(dir => {
    console.log(dir)
    fs.watch(dir, {
      recursive: true  // Tips: 僅在 macOS 和 Windows 上支持 recursive 選項
    }, (eventType, filename) => {
      console.log(eventType, filename)
      if(filename.includes('.less')) {
        const preFileName = `${dir}/${filename.replace('.less', '.wxss')}` //重命名前的文件名
        childProcess.exec(`lessc ${dir}/${filename} ${preFileName}`)
        // 重命名了less文件
        eventType === 'rename' && fs.unlink(preFileName, (err) => {
          if(err) throw err;
          console.log('less重命名了，刪除以前的wxss文件')
        }) 
      }
    })
  })
}
changeLessToCss()
複製代碼

在小程序根目錄運行 node changeLess.js便可

有些大佬可能會吐槽。。。什麼什麼？？？node xxx.js 不夠優雅？？？ 那就在package.json 的 script節點上加入

"scripts": {
    "lessToWxss": "node less2wxss.js"
  }
複製代碼

這樣輸入 npm run lessToWxss便可實時監聽咯～