nodejs less 配置相关

less 全称 lesscss 看名字就知道跟css有关了，

我的理解 less就是为了简化大量的css代码而出现的，当你用了less之后，可以把你的css代码，

规范化，模块化，便于维护和重构。

less分为客户端和服务器端。

客户端：

首先下载less.js 

http://lesscss.org

下载完成后把他引入到你的页面中，在此我用的是node express 和 ejs-locals

就像这样

首先是app.js

/**
 * Module dependencies.
 */

var express = require('express')
  , mongoose = require('mongoose')
  , UserModel = require('./models/user')
  , User = mongoose.model('User')
  , MongoStore = require('connect-mongo')(express)
  , siteRoute = require('./routes/site')
  , user = require('./routes/user')
  , http = require('http')
  , path = require('path')
  , flash = require('connect-flash')
  , ejs = require('ejs-locals')
  , setting = require('./setting');

var app = express();

app.configure(function(){
  app.set('port', process.env.PORT || 3000);
  app.set('views', __dirname + '/views');
  console.log(ejs);
  app.engine('html', ejs);
  app.set('view engine', 'html');
  app.use(express.favicon());
  app.use(express.logger('dev'));
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(express.cookieParser());
  app.use(flash());
  app.use(express.session({ 
	  secret: setting.cookieSecret, 
	  store: new MongoStore({ 
	  db: setting.db 
	  }) 
}));
  app.use(app.router);
  //app.use(require('stylus').middleware(__dirname + '/public'));
  app.use(express.static(path.join(__dirname, 'public')));
});

app.configure('development', function(){
  app.use(express.errorHandler());
});
mongoose.connect('mongodb://localhost/game-maker');

// Routes

// index
app.get('/login', siteRoute.login);
app.post('/register', siteRoute.register);
app.get('/', function(req, res){
	res.render('index', {
		title: 'Test'
	});
});
app.post('/generate',siteRoute.generate);
app.get('/down',siteRoute.download);
var db = mongoose.connection;
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', function callback () {
	app.listen(process.env.PORT || 3000);
	console.log(path);
});

上面的配置后，就可以用后缀是html来解析ejs了。

layout.html

<%-blocks.lesscss%>
<script type="text/javascript" src="js/lib/less/less-1.7.0.min.js"></script>

less文件要在 less.js文件之前引入

单独页面 index.html

 <% block('lesscss', "<link rel='stylesheet/less' href='stylesheets/index/index.less'>") -%>

注意 rel=stylesheet/less

然后就可以编辑自己的less文件了，就像这样

@the-border: 1px;
@base-color: #333;/*只能为数字*/
@red:        #842210;
@less-div-width: 200px;
@less-div-height: 200px;
@base-font:13px Helvetica, arial, freesans, clean, sans-serif;
.rounded-corners (@radius: 5px) when (isnumber(@radius)){
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -ms-border-radius: @radius;
    -o-border-radius: @radius;
    border-radius: @radius;
}
.float(@position) {
	float:@position;
}
#header {
	display:none;
}
.less-div {
	.float(left);
	width:@less-div-width;
	height : @less-div-height;
    color: (@base-color * 3); /*严格要求加括号*/
    border: @the-border solid (@base-color * 3);
    
}
.less-div {
	p {
		color:#B91363;
	}
	input {
		color:#B91363;
		width:100px;
	}
}
.less-div {
	.rounded-corners(6px);
}
#less-select {
	float:right;
	width:100px;
}
.aug-ui {
	.float(left);
	width: 300px;
}
.less-input {
	font:@base-font;
	width: 472px;
	height: 207px;
}
.less-output {
	width: 472px;
	height: 207px;
}

然后刷新，可以看到经过less.js编译后的css在head标签内。

服务器端less:

首先下载node less扩展

npm install less

引入之

less = require('less')

然后就可以用它来解析和编译less了

var parser = new(less.Parser);

var demoCss1 = "@base: #f938ab;\n.box-shadow(@style, @c) when (iscolor(@c)) {\n  box-shadow:         @style @c;\n  -webkit-box-shadow: @style @c;\n  -moz-box-shadow:    @style @c;\n}\n.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {\n  .box-shadow(@style, rgba(0, 0, 0, @alpha));\n}\n.box { \n  color: saturate(@base, 5%);\n  border-color: lighten(@base, 30%);\n  div { .box-shadow(0 0 5px, 30%) }\n}";

   parser.parse(demoCss, function (err, tree) {
			  if (err) {
			    return console.error(err)
			  }
			  fs.writeFile('upload/less.css', tree.toCSS(), function (err) {
				  if (err) throw err;
				  
				});
			  res.json(200, { message: 'OK',data:tree.toCSS() });
			});

上面的代码和用来把解析后的css字符串存入文件中。

很简单的代码，同样，可以用grunt来解析和编译less

需要下载node grunt less 扩展

npm install grunt-contrib-less

在此之前要先下载grunt 和 grunt-cli，顺便附上package.json，照着这个文件 直接npm install就全装完了

{
  "name": "application-name",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node app"
  },
  "dependencies": {
    "express": "3.1.0",
    "stylus": "*",
    "connect-mongo": ">= 0.1.7",
    "mongoose": "3.6.4",
    "connect-flash": "~0.1.0",
    "ejs": "*",
    "ejs-locals": "*",
    "less": "*"
  },
  "devDependencies": {
    "grunt": "^0.4.4",
    "grunt-cli" :"*",
    "grunt-contrib-less": "^0.11.0"
  }
}

如果执行grunt 报错，就重新安装一下grunt-cli

sudu npm install -g grunt-cli

然后创建 Gruntfile.js文件，就像这样

module.exports = function (grunt) {

grunt.initConfig({
    less: {
        compile: {
            files: { //dest                               //src
                'public/stylesheets/index/index.css': 'public/stylesheets/index/index.less',
            }
        }
    },
    watch: {
        scripts: {
            files: ['css/*.less'],
            tasks: ['less']
        }
    }
    
});

grunt.loadNpmTasks('grunt-contrib-less');
//grunt.loadNpmTasks('grunt-contrib-watch');


grunt.registerTask('default', ['less']);
};

具体关于这些配置的意思，参见

https://github.com/gruntjs/grunt-contrib-less

然后在 控制台里运行grunt就OK 了！