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

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

浏览量：3267 时间：2020-01-10 来源：weixin_34096182

重复的轮子

监听less文件变化原地生成css文件，这个功能在诸多编辑器上的插件都能实现，通过配置，也可以改变生成文件的后缀名，比如wxss,acss等。
但是当我接到公司小程序项目的时候，第一反应还是想自己动手实现一个。原因是：

这个工具实现起来并不复杂；
这是个练习的好机会，可以学习如何用node编写命令行工具，如何在npm上发布自己的包。

代码

这个工具做的事情应该是这样的，在项目目录通过命令行运行后，开始监听文件夹包括子文件夹内.less文件的变化，当监听到文件变化时，运行lessc命令在文件所在的目录生成对应后缀的样式文件。
首先是初始化一个node工程

mkdir less2whatevercd less2whatevernpm init复制代码

然后创建一个名为bin的文件夹，在bin文件夹里新建一个less2whatever.js，我们最终输入命令行之后执行的就是这个文件，代码如下

!/usr/bin/env nodevar 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').execconst 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 复制代码