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

我把装的node附件一起放进来了,要放到 nodejs\node_modules\bbb\node_modules\grunt-contrib\node_modules

less public/less/base.less > public/css/base.css 应该是 lessc 编译。

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

https://github.com/lvjian700/less2css

写本文的目的:

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

less 简介

如果你想写这么一段css

Html代码  使用node.js编写工具简化less编译(less2css.js)
  1. #main {  
  2.   width: 960;  
  3.   padding: 50px;  
  4.   margin: 0px auto;  
  5. }  
  6. #main h3 {  
  7.   font-size: 20px;  
  8.   color: #3b5888;  
  9.   background-color: #ccc;  
  10.   padding: 10px;  
  11. }  

使用less你可以这么写:

Html代码  使用node.js编写工具简化less编译(less2css.js)
  1. #main {  
  2.     width: @mainWidth;  
  3.     padding: 50px;  
  4.     margin: 0px auto;  
  5.       
  6.     h3 {  
  7.         font-size: 20px;  
  8.         color: @titleColor;  
  9.         background-color: #ccc;  
  10.         padding: 10px;  
  11.     }  
  12. }  

这里提供的便利

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

如何使用less

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

Html代码  使用node.js编写工具简化less编译(less2css.js)
  1. <link rel="stylesheet/less" href="less/base.less" type="text/css" media="screen" title="no title" charset="utf-8">  
  2.     <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代码  使用node.js编写工具简化less编译(less2css.js)
  1. //js file path is ${project}/bin/less2.js  
  2. var path = require('path');  
  3.   
  4. var public_dir = path.join(__dirname, "..", "public");  
  5. var less_dir = path.join(public_dir, "less", "base.less");  
  6. var css_dir = path.join(public_dir, "css", "base.css");  

 2. 使用exec模块调用shell

Js代码  使用node.js编写工具简化less编译(less2css.js)
  1. var exec = require('child_process').exec;  
  2.   
  3. function compile_less(input_file, output_file) {  
  4.     var cmd = ['lessc ', input_file, ' > ', output_file].join('');  
  5.     exec(cmd, {encoding: 'utf-8'},   
  6.         function(error, stdout, stderr) {  
  7.             if(error !== null) {  
  8.                 console.log(error);  
  9.                 return;  
  10.             }  
  11.             console.log(stdout);  
  12.         });  
  13. }  
  14.   
  15. console.log('compile ' + less_dir + ' once...');  
  16. compile_less(less_dir, css_dir);  

3. 监视文件改动

Js代码  使用node.js编写工具简化less编译(less2css.js)
  1. var   
  2. fs = require('fs');  
  3.   
  4. console.log('watching file ...');  
  5. fs.watchFile(less_dir, {   
  6.         persistent: true,   
  7.         interval: 1000 // 1 sec  
  8.     },   
  9.     function(curr, prev) {  
  10.         console.log('the file changed, compile ...');  
  11.         compile_less(less_dir, css_dir);  
  12.     });  

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

1. 获取node cmd的路径

Shell代码  使用node.js编写工具简化less编译(less2css.js)
  1. which node  

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

Js代码  使用node.js编写工具简化less编译(less2css.js)
  1. #!/usr/local/bin/node  

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

Shell代码  使用node.js编写工具简化less编译(less2css.js)
  1. chmod +x bin/less2css.js  

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

全部代码 

Js代码  使用node.js编写工具简化less编译(less2css.js)
  1. #!/usr/local/bin/node  
  2. var exec = require('child_process').exec,  
  3.     path = require('path'),  
  4.     fs = require('fs')  
  5.   
  6. var public_dir = path.join(__dirname, "..", "public");  
  7.   
  8. var less_dir = path.join(public_dir, "less", "base.less");  
  9. var css_dir = path.join(public_dir, "css", "base.css");  
  10.   
  11.   
  12.   
  13. function compile_less(input_file, output_file) {  
  14.     var cmd = ['lessc ', input_file, ' > ', output_file].join('');  
  15.     exec(cmd, {encoding: 'utf-8'},   
  16.         function(error, stdout, stderr) {  
  17.             if(error !== null) {  
  18.                 console.log(error);  
  19.                 return;  
  20.             }  
  21.             console.log(stdout);  
  22.         });  
  23. }  
  24.   
  25. console.log('compile ' + less_dir + ' once...');  
  26. compile_less(less_dir, css_dir);  
  27.   
  28. console.log('watching file ...');  
  29. fs.watchFile(less_dir, {   
  30.         persistent: true,   
  31.         interval: 1000 // 1 sec  
  32.     },   
  33.     function(curr, prev) {  
  34.         console.log('the file changed, compile ...');  
  35.         compile_less(less_dir, css_dir);  
  36.     });  

项目地址 

https://github.com/lvjian700/less2css

参考资料

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

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

相关推荐