使用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
- #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/
相关推荐
myloveqiqi 2020-08-09
AlisaClass 2020-07-19
hellowzm 2020-08-18
qiupu 2020-11-04
多读书读好书 2020-11-03
RedCode 2020-10-28
jiedinghui 2020-10-25
Ladyseven 2020-10-22
hellowzm 2020-10-12
zuncle 2020-09-28
Ladyseven 2020-09-11
jiedinghui 2020-09-07
xiaohuli 2020-09-02
葉無聞 2020-09-01
impress 2020-08-26
ThikHome 2020-08-24
nicepainkiller 2020-08-20