需求

監控某文件夾內所有的less文件的新建和修改，并編譯為wxss文件

實現步驟，邏輯拆分

• 1、文件夾監控
  用nodeJS的包 chokidar輕松建立文件監控
• 2、less文件轉換為 wxss 文件
  用nodeJS的包 less 編譯less文件
  less 編譯less文件需要運行命令行，child_process 提供開啟命令行的功能
• 3、判斷監控到的文件改變是否需要處理
  判斷文件是否為less=>是則進行編譯并輸出到指定目錄

目錄結構

image.png

develop/config.js

var path = require("path");
module.exports={
  src:path.resolve(__dirname, "../")
};

develop/tools.js

/**
* @desc 判斷文件是否為less文件
* @params filepath 當前發生改變的文件路徑
* @return Boolean 當前發生改變的文件是否為less文件
**/
function isLessFile(filepath) {
  //路徑為空
  if (filepath === ""){
    return false;
  }
  //路徑不含有文件
  if (filepath.indexOf(".")<0){
    return false;
  }
  var arr = filepath.split(".");
  var fileExt = arr[arr.length - 1].toLowerCase();
  if (fileExt === "less") {
    return true;
  } else {
    return false;
  }
}


module.exports={
  isLessFile
};

develop/index.js

var process = require("child_process");
var chokidar = require("chokidar");
var config = require("./config.js");
var tools = require("./tools.js");

/**
* @desc 編譯less函數
* @fn 建立命令行，編譯less文件為wxss文件
**/
function compileLess(filepath){
  process.exec("lessc "+filepath+" "+filepath.replace(".less",".wxss"));
}

/**
* @desc 文件夾監聽
**/
var ready = false;
// 文件新增時 若文件為less文件 則將其編譯為wxss文件至其所在目錄
function addFileListener(path_) {
  if (ready) {
    var isLess = tools.isLessFile(path_);
    if (isLess) {
      compileLess(path_);
    }
    console.log("File", path_, "has been added");
  }
}
/**
* @desc 增加目錄時的回調函數
**/
function addDirecotryListener(path) {
  if (ready) {
    console.log("Directory", path, "has been added");
  }
}

/**
* @desc 文件內容改變時的回調函數
* @fn 判斷是否為less文件，若是則編譯文件為wxss
**/ 
function fileChangeListener(path_) {
  var isLess = tools.isLessFile(path_);
  if (isLess) {
    compileLess(path_);
  }
  console.log("File", path_, "has been changed");
}

/**
* @desc 刪除文件時的回調函數
**/
function fileRemovedListener(path_) {
  console.log("File", path_, "has been removed");
}

/**
* @desc 刪除目錄時的回調函數
**/
function directoryRemovedListener(path) {
  console.log("Directory", path, "has been removed");
}
/**
* @desc 建立監聽任務
**/
var watcher = chokidar.watch(config.src);
watcher
.on("add", addFileListener)
.on("addDir", addDirecotryListener)
.on("change", fileChangeListener)
.on("unlink", fileRemovedListener)
.on("unlinkDir", directoryRemovedListener)
.on("error", function (error) {
  console.log("Error happened", error);
})
.on("ready", function () {
  console.log(">>>less文件監聽已開啟<<<");
  ready = true;
});

package.json配置：設置 start命令，開發時只需在開發目錄運行 npm start即可

{
  "name": "wechat",
  "version": "1.0.0",
  "description": "微信小程序",
  "main": "",
  "scripts": {
    "start": "node develop/index.js"
  },
  "repository": {
    "type": "git",
    "url": "http://192.168.1.89:3000/community/community-view-wechat.git"
  },
  "author": "841420260@qq.com",
  "license": "ISC",
  "devDependencies": {
    "babel-eslint": "^8.0.3",
    "chokidar": "^1.7.0",
    "eslint": "^3.19.0",
    "eslint-config-google": "^0.9.1",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-html": "^3.0.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.2.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^3.0.1",
    "glob": "^7.1.2",
    "less": "^2.7.3"
  }
}