需求
监控某文件夹内所有的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"
}
}
