`
witcheryne
  • 浏览: 1099001 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

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

    博客分类:
  • node
阅读更多

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/

 

 

2
2
分享到:
评论

相关推荐

    关于less的(node npm)环境配置

    配置LESS的开发环境,需要安装Node.js和npm,然后通过npm安装LESS和编译工具。根据项目需求,可以选择不同的编译方式,如命令行工具或集成到构建流程中。一旦环境配置完成,开发者就可以愉快地使用LESS编写优雅、...

    nodejs 批量编译less 文件为css

    本文将深入探讨如何使用Node.js进行批量编译LESS文件到CSS。 首先,我们需要安装Node.js环境,它是JavaScript的服务器端运行环境,使得我们可以在服务器端执行JavaScript代码。安装完成后,我们需要利用npm(Node包...

    less.js-windows

    通常,这会涉及到一个批处理文件(.bat 或 .cmd)或者 Node.js 脚本,通过调用 `lessc` 命令行工具将 LESS 文件转换为 CSS。 安装和使用 "less.js-windows" 的步骤可能如下: 1. **下载与安装**:首先,你需要从...

    Node.js-Brunch-前端web应用程序构建工具

    1. **自动构建**:Brunch可以自动检测文件变化并进行实时编译,包括CSS预处理器(如Sass、Less)、JavaScript模块打包(如ES6模块、CommonJS)、图片优化等。 2. **插件系统**:Brunch拥有丰富的插件库,可以扩展其...

    Node.js-foy:基于nodejs的轻量级通用build工具

    它们帮助开发者自动化繁琐的任务,如编译Sass或Less到CSS,压缩JavaScript和CSS,合并文件,以及处理图片等。本文将深入探讨基于Node.js的轻量级通用构建工具——Foy。 **一、Node.js简介** Node.js是一个开放源...

    Node.js-采用koa2gulpmysql搭建的一套后台前端集成模板

    标题中的“Node.js-采用koa2 gulp mysql搭建的一套后台前端集成模板”表明这是一个使用Node.js作为后端基础,结合Koa2作为Web应用框架,Gulp作为构建工具,以及MySQL作为数据库的综合项目模板。这个模板旨在为开发者...

    node-v12.16.2-x64.rar

    8. **编译LESS**:如前所述,Node.js可以搭配LESS工具,将LESS代码转换为CSS,简化CSS的编写和维护。 安装Node.js后,用户可以通过命令行工具执行JavaScript文件,使用`npm`安装和管理依赖,还可以利用Node.js的...

    less.js-server:一个在 node.js 上运行的本地 HTTP 服务器,监听和服务 LESS 文件编译请求

    我们在开发过程中广泛使用它来将 *.less 文件编译为 *.css 文件。 我们以 root 身份运行它,以便创建的文件具有正确的权限,并且可以写入我们的任何开发树。 我们的基本流程是: 在收集 .css 文件以供服务时,请...

    使用nodeJs来安装less及编译less文件为css文件的方法

    本文将介绍如何使用Node.js来安装Less以及编译Less文件为CSS文件的方法。 首先,开发者需要先安装Node.js。Node.js安装完成后,可以通过命令行工具(cmd)检查安装是否成功。在命令行中输入"node -v",若成功则会...

    less离线安装包

    这个命令会下载less模块并将其安装到全局Node.js模块路径下,这样你就可以在任何项目中使用Less了。 离线安装npm和Less适用于那些对网络访问有限制或者需要在多个机器上快速部署相同环境的场景。这种方式确保了环境...

    Node.js-npminstalllei-dev-server-g简单的前端开发服务器

    4. **编译和构建**:可能集成了一些预处理语言(如Babel用于转换ES6+语法)或CSS预处理器(如Sass或Less),以及自动压缩和优化资源的构建功能。 5. **错误日志**:当出现错误时,服务器可能会在控制台清晰地打印...

    windows平台下的less编译环境

    在Windows平台上搭建LESS编译环境是一项重要的前端开发工作,因为LESS是一种预处理器语言,它可以扩展CSS,添加变量、嵌套规则、运算符等功能,让CSS编写更高效且易于维护。以下是一个详细的步骤来帮助你在Windows上...

    浏览器端如何使用Less

    需要注意的是,虽然在开发过程中,浏览器端实时编译Less很方便,但在生产环境中,由于性能考虑,通常会预先在服务器端或使用Node.js等工具将Less编译成CSS后再发布。 在使用Less.js时,可以通过配置全局`less`对象...

    Less 即时编译CSS插件 for Sublime Text 3

    这款Less插件的引入,使得开发者在Sublime Text 3环境下可以直接编辑Less文件,并且无需额外安装Node.js或lessjs窗口环境,简化了开发配置过程。 标签 "Less2css" 指的是这个插件的主要功能,即将Less源代码转换为...

    前端项目-task.js.zip

    4. **前端构建工具**:Task.js可能类似于Gulp或Grunt这样的前端构建工具,允许开发者定义一系列任务,如CSS预处理器(如Sass、Less)、JavaScript编译(如Babel)、静态资源优化(如图片压缩、HTML压缩)等。...

Global site tag (gtag.js) - Google Analytics