Node.js + Express.js. Làm thế nào để RENDER ít css?

Question

Tôi không thể hiển thị ít css hơn trong không gian làm việc nhanh.
Dưới đây là cấu hình hiện tại của tôi (css/ít tác phẩm của tôi là trong 'công cộng/Stylo /'):

app.configure(function() 
{ 
    app.set('views'  , __dirname + '/views'  ); 
    app.set('partials' , __dirname + '/views/partials'); 
    app.set('view engine', 'jade'      ); 
    app.use(express.bodyDecoder() ); 
    app.use(express.methodOverride()); 
    app.use(express.compiler({ src: __dirname + '/public/stylo', enable: ['less']})); 
    app.use(app.router); 
    app.use(express.staticProvider(__dirname + '/public')); 
}); 

Đây là tôi tập main.jade:

!!! 
html(lang="en") 
    head 
     title Yea a title 
     link(rel="stylesheet", type="text/css", href="/stylo/main.less") 
     link(rel="stylesheet", href="http://fonts.googleapis.com/cssfamily=Droid+Sans|Droid+Sans+Mono|Ubuntu|Droid+Serif") 
     script(src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js") 
     script(src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js") 
    body!= body 

đây là của tôi main.less css:

@import "goodies.css"; 

body 
{ 
    .googleFont; 
    background-color  : #000000; 
    padding    : 20px; 
    margin    : 0px; 

    > .header 
    { 
     border-bottom : 1px solid #BBB; 
     background-color : #f0f0f0; 
     margin   : -25px -25px 30px -25px; /* important */ 
     color   : #333; 
     padding   : 15px; 
     font-size  : 18pt; 
    } 
} 

VÀ đây là goodies.less tôi css:

.rounded_corners(@radius: 10px) 
{  
    -moz-border-radius : @radius; 
    -webkit-border-radius: @radius; 
    border-radius  : @radius; 
} 
.shadows(@rad1: 0px, @rad2: 1px, @rad3: 3px, @color: #999) 
{ 
    -webkit-box-shadow : @rad1 @rad2 @rad3 @color; 
    -moz-box-shadow  : @rad1 @rad2 @rad3 @color; 
    box-shadow   : @rad1 @rad2 @rad3 @color; 
} 
.gradient (@type: linear, @pos1: left top, @pos2: left bottom, @color1: #f5f5f5, @color2: #ececec) 
{ 
    background-image  : -webkit-gradient(@type, @pos1, @pos2, from(@color1), to(@color2)); 
    background-image  : -moz-linear-gradient(@color1, @color2); 
} 
.googleFont 
{ 
    font-family   : 'Droid Serif'; 
} 

mát thỏa thuận. Bây giờ: Tôi đã cài đặt ít hơn qua npm và tôi đã nghe từ một bài đăng khác mà @imports nên tham khảo .css không phải là .less. Trong mọi trường hợp, tôi đã thử kết hợp chuyển đổi .less cho số .css trong ngọc bích và ít tệp hơn mà không thành công.

Nếu bạn có thể giúp hoặc có giải pháp, tôi đánh giá cao nó.

Lưu ý: Phần ngọc bích hoạt động tốt nếu tôi nhập bất kỳ ol '.css nào.
Note2: Ít biên dịch hơn nếu tôi sử dụng lessc thông qua dòng lệnh.

Answer 1

Rất tiếc, nội dung đó rất không phù hợp về cách thức hoạt động của đường dẫn, tuy nhiên tôi đã tìm ra cách bạn có thể làm cho nó hoạt động.

Vấn đề đầu tiên là với đường dẫn của bạn, cả hai compiler và staticProvider, trình biên dịch cần sử dụng /public và sẽ kết nối với tất cả các yêu cầu bên dưới. Nếu bạn không làm điều đó, trình biên dịch sẽ cố gắng sử dụng một đường dẫn như /public/stylo/stylo.

Vấn đề thứ hai nằm ở tệp @import trong tệp main.less và thực tế là trình biên dịch ít là ngu ngốc và không xử lý nhập tương đối.

Sử dụng @import "/public/stylo/goodies.css"; trong số main.less của bạn sẽ hoạt động.

Filed một Bug cho các vấn đề đường dẫn tương đối với less:
https://github.com/cloudhead/less.js/issues/issue/177

Answer 2

Vấn đề là trình biên dịch chỉ biên dịch các tập tin nếu mtime của nó bị thay đổi.

phép nói rằng bạn có:

// A.less 
@import "B.css"; 

và

// B.less 
body { 
    background: #f00; 
} 

tôi bây giờ tôi thay đổi B.less, A sẽ không được biên dịch lại!

Tôi có yêu cầu kéo chờ từ nhiều tháng, bạn có thể sử dụng trình biên dịch ngã ba thay vì trình biên dịch chính.

https://github.com/senchalabs/connect/pull/167

Answer 3

Hai dự án mà có thể làm cho cuộc sống của bạn dễ dàng hơn

1. Buildr: The (Java|Coffee)Script and (CSS|Less) (Builder|Bundler|Packer|Minifier|Merger|Checker)

2. Less4Clients: Express.js extension to render LessCSS (.less) files server-side :)

Answer 4

Nếu bạn muốn rút gọn css outputted, tôi thấy rằng được xây dựng trong com piler (từ mô-đun kết nối) bị thiếu tùy chọn nén. Vì vậy, thay vì viết trình biên dịch middleware của riêng tôi cho nó. Tôi ghi đè trình biên dịch ít kết nối trong ứng dụng của mình.

var express = require('express'); 
var app = express.createServer(); 
var less; 

express.compiler.compilers.less.compile = function (str, fn) { 
    if (!less) less = require("less");              
    try { 
     less.render(str, { compress : true }, fn); 
    } catch (err) { 
     fn(err); 
    } 
}; 

app.use(express.compiler({ src: publicdir, enable: ['less'] })); 

Answer 5

Tôi đã xuất bản một số package on GitHub called node-kickstart-example sử dụng biểu thức được định cấu hình sẵn tiện dụng với hiển thị mẫu ngọc được kích hoạt và chế biến biểu định kiểu ít hơn. Sử dụng NPM để cài đặt kickstart, đặt các mẫu của bạn ngọc trong views/ và các tập tin của bạn trong ít assets/styles/ và tốt của bạn để đi ... giải pháp

Matt Sain của để tạo ra các tập tin nén css với ít hơn và thể hiện được ở trong kickstart.