需求
監(jiān)控某文件夾內(nèi)所有的less文件的新建和修改，并編譯為wxss文件
實(shí)現(xiàn)步驟饲常，邏輯拆分
- 1蹲堂、文件夾監(jiān)控
用nodeJS的包chokidar輕松建立文件監(jiān)控 - 2、less文件轉(zhuǎn)換為 wxss 文件
用nodeJS的包less編譯less文件
less編譯less文件需要運(yùn)行命令行贝淤，child_process提供開啟命令行的功能 - 3柒竞、判斷監(jiān)控到的文件改變是否需要處理
判斷文件是否為less=>是則進(jìn)行編譯并輸出到指定目錄
目錄結(jié)構(gòu)
image.png
develop/config.js
var path = require("path");
module.exports={
src:path.resolve(__dirname, "../")
};
develop/tools.js
/**
* @desc 判斷文件是否為less文件
* @params filepath 當(dāng)前發(fā)生改變的文件路徑
* @return Boolean 當(dāng)前發(fā)生改變的文件是否為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函數(shù)
* @fn 建立命令行，編譯less文件為wxss文件
**/
function compileLess(filepath){
process.exec("lessc "+filepath+" "+filepath.replace(".less",".wxss"));
}
/**
* @desc 文件夾監(jiān)聽
**/
var ready = false;
// 文件新增時(shí) 若文件為less文件 則將其編譯為wxss文件至其所在目錄
function addFileListener(path_) {
if (ready) {
var isLess = tools.isLessFile(path_);
if (isLess) {
compileLess(path_);
}
console.log("File", path_, "has been added");
}
}
/**
* @desc 增加目錄時(shí)的回調(diào)函數(shù)
**/
function addDirecotryListener(path) {
if (ready) {
console.log("Directory", path, "has been added");
}
}
/**
* @desc 文件內(nèi)容改變時(shí)的回調(diào)函數(shù)
* @fn 判斷是否為less文件霹娄，若是則編譯文件為wxss
**/
function fileChangeListener(path_) {
var isLess = tools.isLessFile(path_);
if (isLess) {
compileLess(path_);
}
console.log("File", path_, "has been changed");
}
/**
* @desc 刪除文件時(shí)的回調(diào)函數(shù)
**/
function fileRemovedListener(path_) {
console.log("File", path_, "has been removed");
}
/**
* @desc 刪除目錄時(shí)的回調(diào)函數(shù)
**/
function directoryRemovedListener(path) {
console.log("Directory", path, "has been removed");
}
/**
* @desc 建立監(jiān)聽任務(wù)
**/
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文件監(jiān)聽已開啟<<<");
ready = true;
});
package.json配置：設(shè)置 start命令能犯，開發(fā)時(shí)只需在開發(fā)目錄運(yùn)行 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"
}
}
