内容简介:监听less文件变化原地生成css文件,这个功能在诸多编辑器上的插件都能实现,通过配置,也可以改变生成文件的后缀名,比如wxss,acss等。但是当我接到公司小程序项目的时候,第一反应还是想自己动手实现一个。原因是:这个工具做的事情应该是这样的,在项目目录通过命令行运行后,开始监听文件夹包括子文件夹内.less文件的变化,当监听到文件变化时,运行lessc命令在文件所在的目录生成对应后缀的样式文件。
监听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
复制代码
当我们监听到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…
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 实现一个简单的 JavaScript 编译器
- 200 行代码实现超轻量级编译器
- 编译器跨平台实现 和 自然语言翻译
- 从虚拟机架构到编译器实现导引【一本书的长度】
- 解读 | 华为方舟编译器是如何实现 Android 性能革命的?
- 使用 JavaScript 来实现解释器和编译器系列教程
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Automate This
Christopher Steiner / Portfolio / 2013-8-9 / USD 25.95
"The rousing story of the last gasp of human agency and how today's best and brightest minds are endeavoring to put an end to it." It used to be that to diagnose an illness, interpret legal docume......一起来看看 《Automate This》 这本书的介绍吧!