I'm looking for some middleware modules that allow me to render ".css" from ".scss", ".html" from ".jade", ".js" from ".coffee" on the fly without rendering to disk.
Every module I've encountered so far wants to write to disk before serving it instead of just streaming it.
Obviously this is only for local development since I'm not interested in dealing with file-revving and caching problems.
Answering my own question here:
The middleware to use is compile-middleware. Works fine by default with connect, but with express I had to modify it in order to not write headers (ugly i know, but time waits for no one) : https://github.com/airtonix/compile-middleware
implementation:
https://gist.github.com/airtonix/9601224
Original Credit goes to (You should try using this one first):
https://github.com/shinohane/compile-middleware
You should simply use a JavaScript task runner like:
Grunt: http://gruntjs.com/ or
Gulp: http://gulpjs.com/
These plugins could help you get started (gulp related):
https://www.npmjs.org/package/gulp-watch
https://www.npmjs.org/package/gulp-jade
https://www.npmjs.org/package/gulp-coffee
https://www.npmjs.org/package/gulp-sass
Here's a simple tutorial: http://www.codersgrid.com/2014/01/11/gulp-js-streaming-build-tool-beats-grunt-js/
I got nothing against grunt, both of them are awesome :)
Hope it helps!
Related
I am a new to Node JS. I have included a module via npm install '<module_name>. It was built correctly and there was no errors. Now, I wanted to debug it, so I placed a few console.log('some text') in code blocks of the module to see if the code by passes that line. Anyway, none of the log statements were displayed.
I am wondering if I have to compile or something the modules after adding the log staements. Am I missing something here.
Your console.log statements are not being run, this could be caused by many things.
Assuming you have added the console.log statements to the module code in the node_modules directory of your app..
does the module have src and dist directories and you have not edited the code that is actually being run? (this relates to needing to recompile, but editing the actual code that the module is running will be quicker and easier)
if this is in a server or long running script it will need to be restarted to load the changes
is this in a browser which might be caching the code (turn off browser cache)
is the code where you added the log statements actually being hit?
I would make sure I had a console.log statement in a part of the code guaranteed to be hit, just as a sanity check.
For anyone coming here in the future, try console.error instead of console.log. For some decided reason or another, log was being overriding by the library I was monkey fixing. Took me way too long to find the culprit.
I just though I make my life easier by sticking to common structures, so I started transferring a chrome browser extension to a yeoman template format
(https://github.com/yeoman/generator-chrome-extension).
Unfortunately it simply does not work when I try to just add my first basic bower source that I need:
https://github.com/Yaffle/EventSource
Here is what I did:
Set up the new extension with the yeoman helper
$ bower install EventSource --save
Added event source to the manifest like so
"background": {
"scripts": [
"scripts/chromereload.js",
"app/bower_components/EventSource/eventsource.js",
...
Add "new EventSource('http://localhost:9292/updates');" to background.js
Other than that the project is untouched.
And whenever I start the project with grunt it fails not finding EventSource like so "'EventSource' is not defined."
Adding the eventsource.js directly to my script folder and require it from there fails even worse by linting the eventsource.js file (that works perfectly fine) and aborting it for too many warnings (like using single quotes).
Previously this whole project worked pretty fine without grunt/bower and now it won't even start after I added the first real line of code. This is quite disappointing for a tool that is supposed to make your life so much easier.
Does it fail because of the warnings in the eventsource.js? In the first case (via bower) it does not say anything about this so I'm not sure.
I could go on trying out different combinations but I'm obviously missing a core concept or something like this here.
Any idea?
Update:
After some more trying and giving up i found the magic "grunt bowerInstall" command, to add the script-tags in the template automatically - still no help.
I did also try again on a fresh project with just jQuery (assuming this has to work..), well it still does not.
Neither in the popup.js (where the html template includes jQuery) nor in the background script (where the manifest includes it).
I probably read every manual/how-to on hot to use either of those components and still get nowhere.
Another day another try:
Starting with a clean mind i looked a bit more into it today finding out that apparently you have to "whitelist" globals like $ in jshint like so:
http://jshint.com/docs/options/#jquery
Still not sure if this is actually the best approach as it seems very counter-intuitive with promised ease of getting started of the yeoman/grunt/bower framework.
EventSource is probably a global variable. You can try declaring it as false in the .jshintrc file to prevent it from being overwritten.
"globals" : {
"chrome": true,
"crypto": true,
"EventSource": false
}
See if that works.
Read more about .jshintrc + global variables at: JSHint and jQuery: '$' is not defined
I have created a web site using backbone + requirejs + bootstrap on client side and php REST on server side. The site contains a lot of .js file. I use requirejs to load the .js when it is needed (to implement asynchronous loading).
However, I have start using Node.js + Yeoman + grunt + bower recently. I use Yeoman webapp generator to create the basic structure of my web again. When I build my web, it concat all the .js files into 1 single .js file and put the tag on the index.html to refer it.
From my understand the pros is that the whole .js is cached in client's browser. which is slow at first time visit, but fast on re-visit. Since everything is concat to 1 file and it is loaded to the client's browser, so I guess the asynchronous loading is not work in this case. (correct me if I wrong).
* the web site is created for both mobile and desktop. (1 src for 2 version)
Should I concat all .js files in 1 single file
OR should I use requirejs to require the .js when I need it (Asynchronous loading)?
How to config requirejs in Node. I have tried it in normal way (include the data-main in index.html, when I compile using grunt build. it give me error "... is no more support".
Is browserify similar to requirejs in Node?
I have spent a week to figure it out already but still no luck. Hope someone can point me to the right direction. Thanks a lot.
The .js file structure is something like this:
-app
-vendor
-jquery.js
-backbone.js
-assets
-js
-model
-person.js
-collection
-people.js
-router.js
-controller.js
-dist
-js
-build.js
i had familiar issues. So lets start with strategy of file concatenation. There are three major ways to follow:
first - always concat all modules in one file, in this case you loose on first start and may win or next starts, but you can face another issue - you use less then half of modules from concatenated file at a time, but always load all modules.
second way is to build specific concatenated file with specific module set for each type of page - so you know how many page type you have and build file for each - following this you can decrease size of file, but its hardly to maintain and need manual sets correction in case of page changes.
third - build 1 concatenated file with libs and modules which in use nearly on all pages, all other stuff (additional modules, views, special models and collection) load on demand. This way is good in case of SPA pages.
Let me say a few words about grunt + r.js configauration.
Keep this link for first times .
Here is the sample of config:
requirejs: {
compile: {
options: {
baseUrl: "path/to/base",
mainConfigFile: "path/to/config.js",
name: "path/to/almond",
out: "path/to/optimized.js"
}
}
}
Main point here mainConfigFile - it is a file then you keep require.config
Next step - configure r.js - keep this link its very helpfull as describe all possibilities of r.js.
Usually its quite enough to checkout these links.
Also you can checkout recommend file structure for multi page site to avoid issues in future.
Also here is a link to a similar post - you may find it usefull.
If you have any additional questions let me know.
And a few words about CSS - logic nearlly the same : you can build separate file for each page or create sinngle. The main point here is how large your site is. In my case i've choose second option, but to be honest first one is more scalable, especially in large projects
I can get the requirejs work with Backbone now. However, I cannot use Marionette with error something like "Backbone is undefined". I've install Marionette with this command "bower install marionette --save". I did some search on google, and someone said use the AMD version of Marionette should fix this issue and after replace Marionette with AMD version it is work.
But my question is how can I install the AMD version of Marionette using "bower install"?
My web use bootstrap. When I compile the web with "grunt build". it copy bootstrap's font from "app/bower_components/bootstrap/dist/fonts" to "dist/bower_components/bootstrap/dist/fonts" but the web is refer the font on "dist/fonts". How can I change it to refer to the right directory?
I use yo webapp (with bootstrap) to generate the structure of my web.
socket.io source script goes like 70k, a great part is comments, spaces...
I need to reduce that script to a smaller size
Some scripts do not even have spaces and the code is all toghether, this reduces the script original size.
Where is the location of the socket.io script so that I can remove comments and spaces?
Or is there a socket.io allready whithout comments and spaces with a smaller size?
There is a setting in the socket.io configuration for this:
https://github.com/LearnBoost/Socket.IO/wiki/Configuring-Socket.IO
browser client minification defaults to false
Does Socket.IO need to send a minified build of socket.io.js.
You may also enable gzip compression on the library.
The client .js file is in *yourdir*/node_modules/socket.io/node_modules/socket.io-client/dist
There is one file called socket.io.min.js which is minified already.
The OP fixed the problem by going to /node_modules/socket.io/lib and editing 'manager.js', to set both "minification" and "gzip compression" to "true". They had to do this way because because they were using nowJS which indirectly uses 'socket.io'
This reduced the file from 70k to about 4k!
it seems socket.io is either returning some other file or returning by building at run time.
I replaced socket.io.js by renaming the min one. cleared cache of browser but still getting the old file.
On server side I am using Connect and Socket.IO. I want to serve my client side code (also CofeeScript) to be compiled (to JavaScript), uglyfied and gzipped. I looked for Conenct middleware to do this to me and found uglify-js-middleware and gzippo.
However I am not sure what's a good way to have it converted to JavaScript first (is there no API or something?) and whether I should use temporary directories for every step so I can use the src and dest options of uglify-js-middleware and gzippo or whether there is a better way to pipe it through all these things.
It's okay when this simply gets done when starting my application and so I don't care about checks or anything. I could probably use Cake somehow, but I don't really want to add an extra script for this and it would be cool if I could just pipe it so I don't have the need for temporary directories.
Is there maybe some kind of Middleware that does all of this? I really don't think I am the first one who wants to do this.
Oh and maybe the CofeeScript from a client side directory could be combined into one file, but I guess that's not really a problem.
Ah, if only someone had written a Connect middleware modeled on the Rails 3.1 asset pipeline... oh wait! I recently did: http://github.com/TrevorBurnham/connect-assets
It's pretty early-stage, but it does exactly what you want: compiles CoffeeScript files to JavaScript, concatenates and minifies them in production mode, and doesn't create new files (so no extra git diffs). Try it out and let me know what you think.
check out the compiler middleware: http://senchalabs.github.com/connect/middleware-compiler.html. It does exactly what you want.
app.use express.compiler
src: "#{__dirname}/public/scripts"
enable: ['coffee-script']
http://docpad.org can compile it on the server-side very intuitively
Has anyone seen Mincer?
https://github.com/nodeca/mincer
I'm choosing a solution now, so I haven't vetted it yet, but looks like it's strongly based on Sprockets, like connect-assets.