這麼多平臺的小程式?來實現一個less自動編譯工具8

CSS 小程式開發 · 發表 2019-03-04 16:03:02

摘要：監聽less檔案變化原地生成css檔案，這個功能在諸多編輯器上的外掛都能實現，通過配置，也可以改變生成檔案的字尾名，比如wxss,acss等。但是當我接到公司小程式專案的時候，第一反應還是想自己動手實現一個。原因是：這個工具實現起來並不複雜；這是個練習的好機會，可以...

監聽less檔案變化原地生成css檔案，這個功能在諸多編輯器上的外掛都能實現，通過配置，也可以改變生成檔案的字尾名，比如wxss,acss等。

但是當我接到公司小程式專案的時候，第一反應還是想自己動手實現一個。原因是：

這個工具實現起來並不複雜；
這是個練習的好機會，可以學習如何用node編寫命令列工具，如何在npm上釋出自己的包。

程式碼

這個工具做的事情應該是這樣的，在專案目錄通過命令列執行後，開始監聽資料夾包括子資料夾內.less檔案的變化，當監聽到檔案變化時，執行lessc命令在檔案所在的目錄生成對應字尾的樣式檔案。

首先是初始化一個node工程

mkdir less2whatever
cd less2whatever
npm init
複製程式碼

然後建立一個名為 bin 的資料夾，在bin資料夾裡新建一個 less2whatever.js ，我們最終輸入命令列之後執行的就是這個檔案，程式碼如下

#!/usr/bin/env node
var fs = require("fs"),
path = process.cwd(),
fileWatcher = require("../index.js");
/**
 * 
 * @paramsuffix 自定義生成的字尾名，從命令列的引數中獲取，預設為css
 */
var run = function (suffix="css") {
fs.readdir(path, function (err, files) {
console.log(path)
if (err) {
return console.log(err);
}
fileWatcher(path, suffix)
});
};
//獲取除第一個命令以後的第一個引數
run(process.argv.slice(2)[0]); 
複製程式碼

在package.json中新增bin欄位

"bin": { "less2whatever": "bin/less2whatever.js" }
複製程式碼

表示 less2whatever 命令執行的是 bin/less2whatever.js
程式碼頂部一定要加上 #!/usr/bin/env node ,表示要使用node來執行這段指令碼, fileWatcher 是我們監聽檔案並編譯檔案的程式碼：

const fs = require('fs')
const exec = require('child_process').exec
const path = require('path')
/**
 * 
 * @paramrootPath 執行命令時的路徑
 * @paramfilename 變動的less檔名
 */
function compileFile(rootPath, filename, suffix) {
let filePathArr = `${rootPath + '\\' + filename}`.split('.')
filePathArr.pop()
let filenameWithPath = filePathArr.join('.')
exec(`lessc -x ${filenameWithPath}.less > ${filenameWithPath}.${suffix}`)
}
/**
 * 遞迴監聽資料夾下less檔案的變化（包括新建less檔案）
 * @param rootPath 執行命令時的路徑
 * @param suffix 需要編譯生成的檔案字尾名（wxss/css）
 */
function fileWatcher(rootPath, suffix) {
fs.watch(rootPath,
{
encoding: 'utf-8',
recursive: true,//是否監聽子資料夾下的檔案
persistent: true//是否持續監聽
},
(eventType, filename) => {
if (eventType === "change" && path.extname(filename) === ".less") {
compileFile(rootPath, filename, suffix)
}
});
}
module.exports = fileWatcher 
複製程式碼

當我們監聽到less檔案變化時，執行 compileFile ,通過 lessc 生成對應檔案（所以我們這個工具使用前提是已經全域性安裝了less）（這樣看來我好像啥也沒幹，核心功能是完全依賴less:joy:）

到這裡我們就已經實現了工具的全部功能，接下來是通過 npm publish 釋出

在這之前我們先執行