是否存在可以使用Express 4.0在节点Web服务器上编译LESS CSS的中间件？

Question

Since the connect framework is not used anymore the less-middleware solution does not work anymore or otherwise I am doing something wrong.

I am using express 4.0 and tried using less-middleware 1.0.4 however it does not work and it does not say anywhere that it is supported in express 4.0 since the connect framework is not supported anymore.

So is there middleware that can compile LESS CSS on a node webserver using express 4.0 that has sufficient documentation on how to do it or could you show me. Thanks!

Code I was having issues with can be seen below. If you can see something wrong, please let me know.

var _ = require('lodash');
var express = require('express');
var http = require('http');
var path = require('path');
var app= express();
var fs = require('fs');
var mime = require('mime');
var lessMiddleware = require('less-middleware');

var cache = {};

//get the models
//require('./app_server/models/db');

//set the port to be used
app.set('port', process.env.PORT || 3000);
//set the view folders
app.set('views', path.join(__dirname, 'public/'));

app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
//app.set('view engine', 'jade');


//this should be removed in express 4.0
// app.use(app.router);

//sets the directory that the use can call data from (e.g. link css and js files)
console.log('__dirname', __dirname);

app.use(lessMiddleware(path.join(__dirname, "/app_server/less"), {
    dest: __dirname + "/public/css",
    // if you're using a different src/dest directory, you MUST
    // include the prefix, which matches the dest public directory
    prefix: "/css",
    // force true recompiles on every request... not the best
    // for production, but fine in debug while working through changes
    force: true,
    debug: true
}));

app.use(express.static(path.join(__dirname, 'public')));

//gets routes file that links routes to controllers
require('./routes')(app);

//server helper functions
function send404(response) {
    response.writeHead(404, {'Content-Type': 'text/plain'});
    response.write('Error 404: resource not found.');
    response.end();
}

function sendFile(response, filePath, fileContents) {
    response.writeHead(200, {"content-type": mime.lookup(filePath)});
    response.end(fileContents);
}

function serveStatic(response, cache, absPath) {
    if(cache[absPath]){
        sendFile(response, absPath, cache[absPath]);
    } else {
        fs.exists(absPath, function (exists) {
            if(exists){
                fs.readFile(absPath, function (err, data) {
                    if(err){
                        send404(response);
                    } else {
                        cache[absPath] = data;
                        sendFile(response, absPath, data);
                    }
                });
            } else {
                send404(response);
            }
        })
    }
}

var server = http.createServer(function (request, response) {
    var filePath = false;
    if(!request.url.match(/^\/?(lib|stylesheets|partials|css)/gi)){
        filePath = 'public/index.html';
    } else {
        filePath = 'public' + request.url;
    }

    var absPath = './' + filePath;
    serveStatic(response, cache, absPath);
});

    //make the server work (listen)
    server.listen(process.env.PORT || 3000, function () {
    //    console.log('Server Listening on port 3000');
        console.log('Express server listening on port ' + app.get('port') + ' and running in ' + app.get('env') + ' mode');

    });

Html is

<link rel="stylesheet" type="text/css" href="/css/main.css" media="screen"/>

Answer 1

I have 'less-middleware' working fine in express 4.0. Code i'm using is:

// Convert less to css on the fly
app.use(require('less-middleware')('public'));
// Public folder
app.use(express.static('public'));

After that any less file in public folder (or its subfolders) should be served as css.