I have a project that uses Nib and Stylus on Express server, and after some changes this compilation process from .styl to .css didn't work anymore, I was looking in documentation of Nib, Stylus and Express but I can't find an answero to problem because my code, file directory and settings seems ok. But still doesn't compile.
Code:
express = require("express")
coffee = require("coffee-script")
stylus = require("stylus")
jade = require("jade")
nib = require("nib")
app = express.createServer()
port = process.env.PORT || 3000
app.use app.router
app.use express.methodOverride()
app.use express.bodyParser()
app.set "views", __dirname + "/views"
app.set "view engine", "jade"
app.use stylus.middleware(
src: __dirname + "/src"
dest: __dirname + "/public"
compile: (str, path) ->
stylus(str).set("filename", path).set("warn", true).set("compress", false).set("paths", [ require("stylus-blueprint") ]).use nib()
)
app.listen port
After looking into documention, Github issues, I can't understand what changes have been made to stop working. So, my question, how or what I should be looking for to try resolve this problem?
Thanks for the help in advance.
It would be useful if you provided a error output/log and a cakefile.
Also you might want to look into using connect-assets. A good example of usage is in the express-coffee template.
Related
Stylus and CoffeeScript middleware automatically compile any Stylus and CoffeeScript code for you without having to restart your app, eg you can edit a .styl file and just refresh the page in your browser and your changes will be there. I find this to be very convenient while developing, but would that severely effect the end-user's page load time in production?
My Express setup is usually something like this (CoffeeScript):
app = express()
app.set 'views', __dirname + '/views'
app.set 'view engine', 'jade'
compile = (str, path) -> return stylus(str).set 'filename', path
app.use stylus.middleware {
src: __dirname + '/stylus',
dest: __dirname + '/assets/css',
compile: compile
}
app.use coffee {
src: __dirname + '/coffee',
dest: __dirname + '/assets/js',
encodeSrc: false
}
app.use express.static __dirname + '/assets'
It will definitely be slower than serving the pre-compiled files statically (if Stylus and CoffeeScript don't support caching which I don't know). The question is, whether this matters. And this depends on the intensity of the traffic your app receives.
In general, I would suggest to pre-compile your files and serve it statically. For the deployment, I would suggest to use something like Gulp.js and watch your files. With gulp your files can be automatically compiled on file changes which is most of the time better than compiling it when the files are requested.
So I have a basic Express project set up and I'm using this github project, https://github.com/andrew/node-sass, to be able to use Sass on top of node. This is my app.js currently:
var io = require('socket.io'),
express = require('express'),
path = require('path'),
routes = require('./routes'),
jquery = require('jquery');
/**
* Create app
*/
var app = express()
, server = require('http').createServer(app)
, io = io.listen(server);
/**
* Configure app
*/
app.configure(function(){
app.set('port', 8080);
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.static(path.join(__dirname, 'public')));
});
What do I need to do to get Sass working and auto recompiling? I can't seem to find any useful info for Express servers specifically.
First add this require statement:
var sass = require("node-sass");
and then the following code, in your app.configure block:
...
app.use(sass.middleware({
src: <your-sass-files-dir>,
dest: path.join(__dirname, 'public'),
debug: true
}));
...
But I'm sorry to say that the node-sass library is quite useless at the moment, because the #import's, in your scss files, does not work as it's supposed to... See https://github.com/andrew/node-sass/issues/27 for current status.
UPDATE 2013-10-22: Apparently the issue mentioned above seems to be fixed according to #jonathanconway in the comments below... Though there's still an unanswered comment on the issue from someone that still experiences the error at 2013-09-03
Like joakimbeng said, currently the node-sass library has an issue where the #import's are kind of broken.
However! I found a workaround, which you can see here.
What I did basically is grab the raw sass (in my case, scss), and let node-sass render the string for me. But, since it's current working directory is wherever your server.js file is located, you're going to have to put url's in your sass file, relative to your server.js. In my case, like this.
I have created layout.jade, navigation.jade, and index.jade, and I want to glue them together.
In server.js, how do I
set the path to the views (template) directory, and
set the path to static files.
Is it required that node_module be placed in the folder that contains server.js?
Below is the code for server.js:
//create an app server
var express = require("express");
var server = express.createServer();
//set path to the views (template) directory
app.set('views', D:\#Programming\node.js\trial box\views);
//set path to static files
//how is the path to static files set?
app.use(express.static(__dirname + '/../public'));
//handle GET requests on /
app.get('/', function(req, res){
res.render('index.jade', {title: 'web project'});
});
//listen on localhost:3000
app.listen(3000);
Thank you in advance.
This questions a little old, but I'll still leave an answer. You'll need to place your app.use(... statement inside a callback function for app.configure() like so..
app.configure(function(){
app.use(express.static(__dirname + '/../public'));
});
You should use the express bin tool to bootstrap a project you'd get all that setup.
To install it:
sudo npm install express -g
I have reacently started learning coffescript and was trying to fllow a simple tut. However when I try to run my app.coffee file using
coffee app.coffee command, i keep on getting this exception;
PS C:\Users\Office\Workspace\node\blog-demo\coffeepress> coffee .\app.coffee
Error: In .\app.coffee, Parse error on line 1: Unexpected ' '
at Object.parseError (C:\Users\Rishav\AppData\Roaming\npm\node_modules\coffee-script\lib\coffee-script\parser.js:477
:11)
at Object.parse (C:\Users\Rishav\AppData\Roaming\npm\node_modules\coffee-script\lib\coffee-script\parser.js:554:22)
at exports.compile.compile (C:\Users\Rishav\AppData\Roaming\npm\node_modules\coffee-script\lib\coffee-script\coffee-
script.js:43:20)
at Object.exports.run (C:\Users\Rishav\AppData\Roaming\npm\node_modules\coffee-script\lib\coffee-script\coffee-scrip
t.js:79:34)
at compileScript (C:\Users\Rishav\AppData\Roaming\npm\node_modules\coffee-script\lib\coffee-script\command.js:175:29
)
at fs.stat.notSources.(anonymous function) (C:\Users\Rishav\AppData\Roaming\npm\node_modules\coffee-script\lib\coffe
e-script\command.js:150:18)
at fs.readFile (fs.js:176:14)
at Object.oncomplete (fs.js:297:15)
the coffee code is;
###
Module dependencies.
###
express = require("express")
routes = require("./routes")
http = require("http")
path = require("path")
app = express()
app.configure ->
app.set "port", process.env.PORT or 3000
app.set "views", __dirname + "/views"
app.set "view engine", "jade"
app.use express.favicon()
app.use express.logger("dev")
app.use express.bodyParser()
app.use express.methodOverride()
app.use app.router
app.use express.static(path.join(__dirname, "public"))
app.configure "development", ->
app.use express.errorHandler()
app.get "/", routes.index
http.createServer(app).listen app.get("port"), ->
console.log "Express server listening on port " + app.get("port")
All my modules are the latest available till date.
Your code is absolutely fine. Coffeescript however reserves keywords like static therefore if you run coffee -c your_file.coffee you will see your compiled js in your_file.js. Open it with editor and see what is wrong.
I am betting that the line app.use express.static(path.join(__dirname, "public")) gets compiled to somthing like app.use(express["static"](path.join(__dirname,"public")). And that causes your error ;)
In future, if there is an error, compile the coffeescript first and then see the compiled version and see what is wrong with it.
I can run the code except for the routes file which you don't provide. I would try to recreate the file and see if there is anything corrupt with the actual file. I have sometimes had problem with Coffeescript files being malformed in indenting and it complains on something else.
The other thing I suspect is that there might be something wrong in your routes file.
I have decided to use ExpressJS with CoffeeScript and Stylus. Usually when I work with CoffeeScript, I do a coffee --watch and something similar for Compass/SASS. Here, since CoffeeScript and Stylus are available as a NPM package, I was thinking if its possible to write CoffeeScript and Stylus and have Node/Express compile them when required? This way I wont need a watcher anymore.
Also when I create an express app using express -c stylus, in app.js I get additional:
app.use(require('stylus').middleware({ src: __dirname + '/public' }));
What does it actually do? It doesn't appear to compile my CSS? When I put
body
background: red
into the default style.styl file, restart server, it doesn't appear to show
Ok so theres connect-assets for this exact purpose. Now I am still looking for something for server side ...
try to set
var stylus = require('stylus');
app.use(stylus.middleware({
src: __dirname + '/public',
compile: function(str, path) {
return stylus(str)
.set('filename', path)
.set('compress', false)
.set('warn', true);
}
}));
This compile function is not required, but without it the styl files don't get compiled..