使用node.js编写工具简化less编译(less2css.js)
2016-07-29 00:00
459 查看
Less 是一个非常优秀的css增强方言。如果你熟悉Bootstrap,你会发现这个项目大量使用Less, 并且可以通过修改less文件,以此定制自己的boostrap。
最近在formdesigner中尝试使用less代替css。其中自己用node.js写了一个脚本来简化less编译操作。关于这个工具的代码,你可以在这里获取:
https://github.com/lvjian700/less2css
介绍如何将node.js脚本当shell使用
介绍node.js 拼接地址的方式
介绍如何使用node.js 调用shell
介绍如何使用node.js 监视文件改动
使用less你可以这么写:
更方便的方式写嵌套样式
less public/less/base.less > public/css/base.css
监视文件改动,一旦改动,自动编译
这样可以不在使用node ***.js 来执行脚本,直接使用 bin/less2css.js即可。当然你也可以去掉*.js的后缀。
Less文档:http://lesscss.org/
最近在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 -gless 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/
相关文章推荐
- Linux socket 初步
- Linux Kernel 4.0 RC5 发布!
- linux lsof详解
- linux 文件权限
- Linux 执行数学运算
- 10 篇对初学者和专家都有用的 Linux 命令教程
- Linux 与 Windows 对UNICODE 的处理方式
- 使用 HTTP 上传 G 级的文件之 Node.js 版本
- Ubuntu12.04下QQ完美走起啊!走起啊!有木有啊!
- 解決Linux下Android开发真机调试设备不被识别问题
- 运维入门
- 运维提升
- Linux 自检和 SystemTap
- Ubuntu Linux使用体验
- Web布局连载——两栏固定布局(五)
- mongo实现消息队列
- c语言实现hashmap(转载)
- Linux 信号signal处理机制