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

最新推荐文章于 2023-05-19 00:15:35 发布

weixin_34096182

最新推荐文章于 2023-05-19 00:15:35 发布

阅读量199

点赞数

文章标签： json

原文链接：https://juejin.im/post/5c7b208ee51d457f7b6c98f5

版权

重复的轮子

监听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");
/**
 * 
 * @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 
复制代码