小程序开发之用node监控less并转为wxss

需求

监控某文件夹内所有的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": "[email protected]",
  "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"
  }
}