这么多平台的小程序?来实现一个less自动编译工具8

监听less文件变化原地生成css文件，这个功能在诸多编辑器上的插件都能实现，通过配置，也可以改变生成文件的后缀名，比如wxss,acss等。

但是当我接到公司小程序项目的时候，第一反应还是想自己动手实现一个。原因是：

1. 这个 工具 实现起来并不复杂；
2. 这是个练习的好机会，可以学习如何用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");
/**
 * 
 * @param  suffix 自定义生成的后缀名，从命令行的参数中获取，默认为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')
/**
 * 
 * @param  rootPath 执行命令时的路径
 * @param  filename 变动的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 发布

在这之前我们先执行

npm install . -g
复制代码

这行命令是将这个包全局安装在自己的电脑上，我们可以先验证一下工具有没有问题

工具可以正常使用，接下来就是发布了

npm publish
复制代码

需要注意的是如果你之前没有发布过npm包，需要执行 npm adduser 添加你的账号，然后就可以发布成功了，当你更新了包的内容，记得把package.json中的version同步更改，在执行 npm publish 就可以更新你的npm包了。

第一次在掘金写文章，内容有些简单，但确实是我第一次自己实现生产力工具，第一次发布npm包的过程。

感谢大家的阅读。

项目地址： github.com/zwlafk/less…

npm地址： www.npmjs.com/package/les…