Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using stylus middleware with express 4, SyntaxError

Im trying to use nodejs express v4 with stylus, but its throwing SyntaxError. Please help, also you can find my server.js below;;

Please note: Im first time creating MEANstack project, and dont be harsh on me :)

Your environment has been set up for using Node.js 0.10.26 (x64) and npm.

Error: Most middleware (like logger) is no longer bundled with Express and must
be installed separately. Please see https://github.com/senchalabs/connect#middle
ware.
    at Function.Object.defineProperty.get (C:\Sites\meanProject\node_modules\exp
ress\lib\express.js:89:13)
    at Object.<anonymous> (C:\Sites\meanProject\server.js:10:17)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Function.Module.runMain (module.js:497:10)
    at startup (node.js:119:16)
    at node.js:902:3

server.js:

    var express = require('express');
var stylus = require('stylus');
var env = process.env.NODE_ENV = process.env.NODE_ENV || 'development';

var app = express();

//set view engine
app.set('views', __dirname + '/server/views');
app.set('view engine', 'jade');
app.use(express.logger('dev'));
app.use(express.bodyParser());

//style middlware
app.use(stylus.middleware({
  src: __dirname + '/public',
  dest: __dirname + '/public/css',
  compile: function compile(str, path){
     return stylus(str).set('filename', path).set('compress', true);
  }
}));

app.use(express.static(path.join(__dirname + '/public')));//all public req will be responded by public dir now.

//load route
app.get('*', function(req, res){
    res.render('index');
});

//start listening on server
var port = 3000;
app.listen(port);
console.log('Server running at localhost:' + port);
like image 941
STEEL Avatar asked Jun 14 '26 03:06

STEEL


1 Answers

@thyforhtian yes, you were right my code was outdated.

I fixed it. Im not using nodejs to compile my stylus file anymore, instead im using gulp.

Posting my file here, with steps, it might be helpful for someone-else.

Compile stylus files with gulp watch. And code for express server js file

Started with installing node modules

npm init 
npm install -save express jade


// Step 1: Install gulp globally
npm install -g gulp

// Step 2: Install gulp in your project
npm install --save-dev gulp gulp-stylus gulp-plumber

npm install morgan body-parser --save

server.js

var express = require('express');
var stylus = require('stylus');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var env = process.env.NODE_ENV = process.env.NODE_ENV || 'development';

var app = express();

//set view engine
app.set('views', __dirname + '/server/views');
app.set('view engine', 'jade');
app.use(logger('dev'));
app.use(bodyParser.urlencoded());
app.use(cookieParser());

//all public req will be responded by public dir now.
app.use(express.static(__dirname + '/public'));

//load route
app.get('*', function(req, res){
    res.render('index');
});

//start listening on server
var port = 3000;
app.listen(port);
console.log('Server running at localhost:' + port);

gulpfile.js

var gulp = require('gulp');
var stylus = require('gulp-stylus');
var plumber = require('gulp-plumber');

gulp.task('stylus', function() {
  gulp.src('public/stylesheets/style.styl')
    .pipe(plumber())
    .pipe(stylus())
    .pipe(gulp.dest('public/stylesheets'));
});

gulp.task('watch', function() {
  gulp.watch('public/stylesheets/*.styl', ['stylus']);
});

gulp.task('default', ['stylus', 'watch']);

run gulp to execute

like image 108
STEEL Avatar answered Jun 16 '26 15:06

STEEL



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!