Węzeł-węzeł nie kompiluje się automatycznie w najnowszym węźle/ekspresie

Question

Użycie węzła (0.10.15) i wyrażenia (3.3.4), wraz z ostatnim węzłem-sasem, i nie mogę uzyskać plików scss do kompilacji . Mój plik app.js wygląda następująco:

var express = require('express') 
    , routes = require('./routes') 
    , user = require('./routes/user') 
    , http = require('http') 
    , path = require('path') 
    , sass = require('node-sass'); 

var app = express(); 

// all environments 
app.set('port', process.env.PORT || 3000); 
app.set('views', __dirname + '/views'); 
app.set('view engine', 'ejs'); 
app.use(express.favicon()); 
app.use(express.logger('dev')); 
app.use(express.bodyParser()); 
app.use(express.methodOverride()); 
app.use(express.cookieParser('your secret here')); 
app.use(express.session()); 
app.use(app.router); 
app.use(express.static(path.join(__dirname, 'public'))); 

app.use(
    sass.middleware({ 
    src: __dirname + '/public/sass', 
    dest: __dirname + '/public', 
    debug: true, 
    outputStyle: 'compressed' 
    }) 
); 

// development only 
if ('development' == app.get('env')) { 
    app.use(express.errorHandler()); 
} 

app.get('/', routes.index); 
app.get('/users', user.list); 

http.createServer(app).listen(app.get('port'), function(){ 
    console.log('Express server listening on port ' + app.get('port')); 
}); 

Czego mi brakuje, aby skompilować autosynchronizację?

Jeśli to ma znaczenie, używam nadzoru do monitorowania zmian.

Answer 1

Pliki middleware są wykonywane w kolejności, w jakiej są dołączone do aplikacji. Środowisko programowe node-sass kompiluje tylko pliki scss do css, ale ich nie obsługuje. Warianty static mogą obsługiwać skompilowane pliki css, jednak nie można tego zrobić, dopóki pliki css nie zostaną jeszcze skompilowane. Jeśli przełączyć static i sass middleware, wszystko powinno działać zgodnie z oczekiwaniami:

app.use(
    sass.middleware({ 
    src: __dirname + '/public/sass', 
    dest: __dirname + '/public', 
    debug: true, 
    outputStyle: 'compressed' 
    }) 
); 

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

Teraz dodaje się dzieje, gdy wniosek /style.css:

1. sass zauważa wniosek o pliku css. Jeśli plik dest (__dirname + '/public' + '/style.css') jest aktualny, nie robi nic. W przeciwnym razie szuka pliku src (__dirname + '/public/sass' + '/style.scss') i kompiluje go, jeśli istnieje.
2. static odnotowuje żądanie statycznego zasobu. Jeśli żądany plik (path.join(__dirname, 'public') + '/style.css') istnieje, jest obsługiwany.

Answer 2

Też miałem poważne problemy z ustawianiem tego z Koa (koa.js) i koa-sass. W końcu odkryłem problemy. node-Sass jest „zbyt mądry” dla jego własnego dobra:

app.use(sass({ 
    src: __dirname + '/public/sass', 
    dest: __dirname + '/public/css', 
    debug: true, 
    outputStyle: 'compressed', 
    prefix: '/stylesheets' 
})); 

ja dostawałem 500, gdy próbował uzyskać dostęp /public/sass/stylesheets/styles.css - ale nie mam „stylów” na mojej drodze: Mój plik szablonu html było patrząc na /stylesheets/styles.css, więc musiałem usunąć prefiks z prefix: '/stylesheets'.

Następnie miałem problem z plikiem scss - przypadkowo skopiowałem stary plik .styl i próbowałem użyć nib - które znalazłem po odkryciu debug: true setting.

Po zastąpieniu go poprawnym plikiem css lub scss został skompilowany i renderowany za pomocą koa-static.

Mimo że jest to problem koa-sass, koa-sass po prostu zawija węzeł-sass z generatorem, więc należy tutaj (IMO).