欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

使用node.js编写工具简化less编译(less2css.js)

程序员文章站 2022-04-27 22:24:49
...

Less 是一个非常优秀的css增强方言。如果你熟悉Bootstrap,你会发现这个项目大量使用Less, 并且可以通过修改less文件,以此定制自己的boostrap。

最近在formdesigner中尝试使用less代替css。其中自己用node.js写了一个脚本来简化less编译操作。关于这个工具的代码,你可以在这里获取:

https://github.com/lvjian700/less2css

写本文的目的:

  • 简单介绍less的使用
  • 介绍如何将node.js脚本当shell使用
  • 介绍node.js 拼接地址的方式
  • 介绍如何使用node.js 调用shell
  • 介绍如何使用node.js 监视文件改动

less 简介

如果你想写这么一段css

 

#main {
  width: 960;
  padding: 50px;
  margin: 0px auto;
}
#main h3 {
  font-size: 20px;
  color: #3b5888;
  background-color: #ccc;
  padding: 10px;
}

 

使用less你可以这么写:

 

#main {
	width: @mainWidth;
	padding: 50px;
	margin: 0px auto;
	
	h3 {
		font-size: 20px;
		color: @titleColor;
		background-color: #ccc;
		padding: 10px;
	}
}

 

 

这里提供的便利

  • 提供变量的支持
  • 更方便的方式写嵌套样式

如何使用less

1. 在html页面中嵌入less.js,动态渲染css

 

<link rel="stylesheet/less" href="less/base.less" type="text/css" media="screen" title="no title" charset="utf-8">
	<script src="js/less.js" type="text/javascript" charset="utf-8"></script>

 

 

2. 使用less指令将less编译成css(这部分是我要简化的部分)

npm install less -g

less public/less/base.less > public/css/base.css 

 

这里第二种方式是我需要简化的。

  • 简化指令参数
  • 监视文件改动,一旦改动,自动编译

简化指令参数:

1. 使用node.js的path包拼接文件路径:

 

//js file path is ${project}/bin/less2.js
var path = require('path');

var public_dir = path.join(__dirname, "..", "public");
var less_dir = path.join(public_dir, "less", "base.less");
var css_dir = path.join(public_dir, "css", "base.css");

 

 2. 使用exec模块调用shell

 

var exec = require('child_process').exec;

function compile_less(input_file, output_file) {
	var cmd = ['lessc ', input_file, ' > ', output_file].join('');
	exec(cmd, {encoding: 'utf-8'}, 
		function(error, stdout, stderr) {
			if(error !== null) {
				console.log(error);
				return;
			}
			console.log(stdout);
		});
}

console.log('compile ' + less_dir + ' once...');
compile_less(less_dir, css_dir);

 

3. 监视文件改动

 

var 
fs = require('fs');

console.log('watching file ...');
fs.watchFile(less_dir, { 
		persistent: true, 
		interval: 1000 // 1 sec
	}, 
	function(curr, prev) {
		console.log('the file changed, compile ...');
		compile_less(less_dir, css_dir);
	});

 

 

如何让node.js可以当shell用。

1. 获取node cmd的路径

 

which node

 

2. 将路径加到node.js文件第一行

 

#!/usr/local/bin/node

 

 3. 为js文件添加执行权限

 

chmod +x bin/less2css.js

 

 这样可以不在使用node ***.js 来执行脚本,直接使用 bin/less2css.js即可。当然你也可以去掉*.js的后缀。

 

全部代码 

#!/usr/local/bin/node
var exec = require('child_process').exec,
    path = require('path'),
	fs = require('fs')

var public_dir = path.join(__dirname, "..", "public");

var less_dir = path.join(public_dir, "less", "base.less");
var css_dir = path.join(public_dir, "css", "base.css");



function compile_less(input_file, output_file) {
	var cmd = ['lessc ', input_file, ' > ', output_file].join('');
	exec(cmd, {encoding: 'utf-8'}, 
		function(error, stdout, stderr) {
			if(error !== null) {
				console.log(error);
				return;
			}
			console.log(stdout);
		});
}

console.log('compile ' + less_dir + ' once...');
compile_less(less_dir, css_dir);

console.log('watching file ...');
fs.watchFile(less_dir, { 
		persistent: true, 
		interval: 1000 // 1 sec
	}, 
	function(curr, prev) {
		console.log('the file changed, compile ...');
		compile_less(less_dir, css_dir);
	});

 

项目地址 

https://github.com/lvjian700/less2css

 

参考资料

Node.js API: http://nodejs.org/api/

Less文档:http://lesscss.org/