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

栏目: CSS · 发布时间: 4年前

内容简介:监听less文件变化原地生成css文件,这个功能在诸多编辑器上的插件都能实现,通过配置,也可以改变生成文件的后缀名,比如wxss,acss等。但是当我接到公司小程序项目的时候,第一反应还是想自己动手实现一个。原因是:这个工具做的事情应该是这样的,在项目目录通过命令行运行后,开始监听文件夹包括子文件夹内.less文件的变化,当监听到文件变化时,运行lessc命令在文件所在的目录生成对应后缀的样式文件。

监听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
复制代码

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

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

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

npm publish
复制代码

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

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

感谢大家的阅读。

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

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


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Node.js开发指南

Node.js开发指南

郭家寶(BYVoid) / 人民邮电出版社 / 2012-7 / 45.00元

Node.js是一种方兴未艾的新技术,诞生于2009年。经过两年的快速变化,Node.js生态圈已经逐渐走向稳定。Node.js采用了以往类似语言和框架中非常罕见的技术,总结为关键词就是:非阻塞式控制流、异步I/O、单线程消息循环。不少开发者在入门时总要经历一个痛苦的思维转变过程,给学习带来巨大的障碍。 而本书的目的就是帮助读者扫清这些障碍,学会使用Node.js进行Web后端开发,同时掌握事件驱......一起来看看 《Node.js开发指南》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具