js-kyle / connect-assets

A Rails-style asset pipeline for Node.js

About

I'm a Technical Lead/Integration Architect interested in integration design and FHIR.

Highlights

• Lead Developer at Universal Media Server
• Steering Committee Emeriti member of the Node.js Best Practices repository, you can view our work here.
• Coordinated disclosure of a security vulnerability in MongoDB, acknowledged here.
• My articles tutorials have featured on nodeweekly.com, issues #269, #320, #303

connect-assets's Issues

Have to clear browser cache on changes

If I make changes to my styl or coffee files I need to clear my browser cache now for the changes to take affect.

can css "require"

?

Caching

I'd like to emulate the Rails 3.1 approach to caching (in production mode): Far-future headers are set on each script that's served, and the MD5 hash of the script's contents is appended to the file's name.

Allow adding new compilers

We're using connect-assets with a sproutcore application on the frontend.
Therefore, we have handlebars files, which needs to have a specific precompilation.

Currently, we need to fork the project into our own directory and add the new compiler directly with the other ones.
It'd be very cool if we could add our own compilers without having to fork the project.

Slow when build:true

When setting build:true or running in production. The assets will build, and that is usually slow but expected, but subsequent hits are slow (not as slow but slower than without building)... I can get more details but maybe you were aware of this one.

concatenate several JS files without listing all of them

hey - nice project. I see that you use require to pull in other classes. Is there another way to get a concatenated file in production other than having lots of #require ?

Question / Issue w/ Cluster API

Using the 0.6.6 Cluster API I get odd issues with my bundle assets. It makes sense that this would work be problematic since there is more than one process managing the assets, however is there a way to work around this? I have been looking and haven't had much luck.

../subdir

hey i was using the following option src: "../client"

it seems that the view helpers are now truncating the filename (I'm getting src='uery.js' rather than src='jquery.js')

Coffeescript File With Only Includes Error

I have a global coffeescript file that is just for includes

= dependency

It now includes that file with an error 'Failed to load resource' in the console

Gzip

I'd like to store both uncompressed and gzipped versions of every cached file, and serve the gzipped version to browsers with the appropriate headers. The benefits of gzipping are small, but should be noticeable in some cases (e.g. for large assets delivered over cellular connections).

Code breaks with 2.0.2

I had 2.00 rc1 installed but when I upgraded it to 2.0.2 it broke:

The code looks like this:

app.use require("connect-assets")
     src: __dirname + "/../client"

It couldn't find my coffee script files after the upgrade.

Any clue?

options.src not working as expected

This issue looks similar to https://github.com/TrevorBurnham/connect-assets/issues/23 , so please forgive me if there is overlap.

I am working on a fairly large project (https://github.com/Postmedia/timbits-example) that uses connect-assets. It seems the update to 2.1.0 has breaking changes and I am trying to find a suitable workaround. I was previously working with version 2.0.0-rc1 without issue. My working code that I was using with 2.0.0-rc1 was (yes, I was using it to serve dynamic data from two different directories):

assets = require 'connect-assets'

@server.use assets({src:"#{process.cwd()}/public"})
@server.use assets({src:"#{process.cwd()}/views"})

Let's say /public/template/story.coffee exists.

On 2.0.0-rc1 my requests to both /public/template/story.coffee and /public/template/story.js are successful.

However, on 2.1.0, both requests for /public/template/story.coffee and /public/template/story.js fail

Similarly, I am having trouble running your tests (but this may be unrelated).

Using 2.0.0-rc1, when I run /test/test.coffee and then visit http://localhost:3588/js/a.js in a browser I get javascript (success).

Using 2.1.0, when I run /test/DevelopmentIntegration.coffee (I notice /test/test.coffee has been removed) and then hit http://localhost:3588/js/a.js I get "Cannot GET /js/a.js"

Thoughts? Thanks in advance.

js() doesn't work on iPhone/iPad

So js() works on desktops/laptops but not on iPhones and iPads.

I have no idea why but when I switched back to 2.0.0-rc1 it worked perfect.

A lot of issues with the new loading system :)

Can't there be a mode for the regular "script" loading?

Can only run from root directory

I have my servers setup to run as a service on Ubuntu, so I'm not starting node from the directory it's in.

Before I could setup src as __dirname + 'assets' and it would work fine if I ran node server.js from anywhere, now I'm required to run it from the source directory otherwise connect-assets can't find the assets directory.

Support for new connect-file-cache

What's the timeline for connect-assets to work with 0.2.4 of connect-file-cache with node 0.6?

Thanks ^^

@import 'foo.css' isn't copied/include to built assets from stylus files

connect-assets does not serve up @imported .css files from a .styl file. The css file is not copied over to builtAssets

Unable to access "jsCompilers"

I'm new to node.js so this may very well just be my misunderstanding. I'm trying to enable connect-assets to compile my eco templates for use on the front-end. Have the following code (at least it's part of it from my main file for my express app): https://gist.github.com/1431342

When I run that code, I get this error: "Cannot set property 'eco' of undefined".

What am it doing wrong? Or is something broken?

Paths in Windows

Hi,
I have a problem with the resolution of relative paths to the absolute path under windows (win 7 64bit).
Node is searching for the files under 'D:\git\wedex\academy\lib\D:\git\wedex\academy\lib\public\css\bootstrap.min.css',
but it should be 'D:\git\wedex\academy\lib\public\css\bootstrap.min.css'.
You can see that there is a duplication in the path.

Thanks

Generated files should use a standard suffix trailing extensions.

The extension generated by connect-assets are a bit unusual. For instance, if I have the following:

!= js('somescript')

Then I end up (on production) with the following filename:

somescript.complete.js

This should be configurable, because it really should result in:

somescript.min.js

Problem wiring the middleware in

Using this for the first time, and I thought this is just great, saving me a lot of time. CoffeeScript all the way.

But I have a bit of a trouble wiring it in. Surely I did something wrong, reading the README ten times did not help. My file structure is this:

/
    assets/
        styles.styl
    app.coffee
    server.js
    public/
        css/
        js/
            jquery.min.js

And my app.coffee is like this (relevant parts):

express = require 'express'

app = module.exports = express.createServer()

oneYear = 31557600000

app.configure ->
    app.set 'views', "#{__dirname}/views"
    app.set 'view engine', 'coffee'
    app.register '.coffee', require('coffeekup').adapters.express
    #app.use require('stylus').middleware src: "#{__dirname}/public", dest: "#{__dirname}/public", compress: true
    app.use require('connect-assets') src: "#{__dirname}/assets/"
    app.use express.cookieParser()
    app.use express.methodOverride()
    app.use express.bodyParser()
    app.use app.router

app.configure 'development', ->
    app.use express.static "#{__dirname}/public"
    app.use express.logger format: ':method :url'
    app.use express.errorHandler dumpExceptions: true, showStack: true

app.configure 'production', ->
    app.use express.static "#{__dirname}/public", maxAge: oneYear 
    app.use express.errorHandler()

app.get '/', (req, res) ->
    res.render 'index', title: 'Express'

I am using CoffeeKup for the views, because I like CoffeeScript that much. My view:

doctype 5
html ->
    head ->
        meta charset: 'utf-8'
        title "#{@title or 'Untitled'}"
        meta(name: 'description', content: @description) if @description?
        css 'styles'
        js 'jquery.min'
    body @body or 'No content'

All right, so when I now open the route '/', I get this error:

TemplateError: Error rendering /home/scan/Javascript/neighr/views/layout.coffee: No file found for route css/styles.css

It can't find js/jquery.min.js either when I comment out the css line.

CoffeeKup is similar to jade when it comes to external functions, according to their docs. So what did I do wrong?

how to change "assets" directory

hi - I wasn't quite sure how to set this option ?

aliases

Great module I just gave it a successful try using express and jqtpl template

One cool feature to add would be the possibility to add alias on javascript files so that we don't have to rename jquery-1.6.js to jquery.js for example

Another one would be to only output javascript dependency once
ie when 2 files requires the same dependency only the first call to js output the <script> tag

Feature: SASS support

Could there be a SASS support too?

New files not recognized by require_tree

Test case:

#= require_tree .

Refresh the page. Add a .js or .coffee file in that script's directory. Refresh the page again. The new file isn't picked up.

The fix will be to watch (or periodically rescan) each directory tree that require_tree is used on.

Template helpers don't work with CoffeeKup

When using the css and js helpers in CoffeeKup, they only render if they are the last tag inside another tag.

CoffeeKup functions require them to write to a buffer. The return value of a function isn't always rendered.

I've had a look inside CoffeeKup but it doesn't seem to provide an easy way to attach new tags.

In the mean time the error can be bypassed by creating helpers that wrap the functions in a 'text' tag function (which basically just renders what you pass to it).

ck = require 'coffeekup'

helpers = {
  css: (attrs) ->
    return text global.css(attrs)
  js: (attrs) ->
    return text global.js(attrs)
}

ck.render template, { hardcode: helpers }

I'll keep an eye out to see if anything changes in coffee script that would allow us to easily attach these functions, but if anybody has already figured this out I'll be glad to help implement it.

Can't serve multiple js files

In my CoffeeKup template I am using multiple js() lines.

js "/app"
js "/app/controller/Boot"
js "/app/controller/System"

The issue is that only the last one is served. It's System in this case, but if I remove the last line, Boot will be served etc.

How do I serve multiple files with assets?

'require' parsing is broken

While I can't seem to produce a stand-alone test case, I have found in my application that:

#= require dep1 dep2 dep3

works (generates correct dependency tags and order in generated output), whereas:

#= require dep1
#= require dep2
#= require dep3

does not. I will keep trying to find a small test case that exhibits this problem.

express using connect-assets example

Hello Trevor, I previously opened an issue (#31) describing breaking changes that occurred after 2.0.0-rc1. I am still having trouble getting connect-assets to work as you describe in your documentation. Essentially 2.0.0-rc1 works as expected but I can't get any version higher to work for me. I understand that I am probably implementing your new modifications incorrectly (or the documentation is ambiguous), so I have created a very simple github project to example my issue. If you could take a quick minute to have a look it would be very much appreciated. The project is located here https://github.com/veerman/connect-assets-test . I have changed the assets src directory to point to 'public' in the project folder. Basically requests to http://localhost:5678/a.coffee work if you modify the project to use 2.0.0-rc1, but fail for any subsequent version. What am I doing wrong?

Thanks in advance,
Steve

Support multiple src folders

Our project structure contains a number of local assets specific to the app as well as a number of shared resources that are pulled into the app from a separate, shared project. We'd like to use connect-assets for all of our static resources (both local and shared). To do that, we need to be able to specify multiple 'src' folders that connect-assets would look through when it's resolving a given asset's filename.

src is required with a trailing /

I am now required to do the following

app.use(require('connect-assets')({src: "assets/"}));

Otherwise files aren't found

Support for CSS compiling

https://github.com/LearnBoost/stylus/issues/448

This was added recently, any plans to have it used here?

Dynamically loading coffeescript files from the frontend

I am using ExtJS 4 and there is a problem with the new loading approach.

Atm I have to call js() from within my html templates but when using ExtJS the files are loaded dynamically from the browser.

That is their are actually making an Ajax request to my coffeescript files eg. "/app/controller/MyController.js" but now it can't find it since I didn't use js() in the HTML template.

• Isn't there a way to skip js() method at least when I am in development mode since ExtJS is just dynamically loading files in development mode too? In production mode it will have one big JS file compiled. Or else I have to have a list of 100+ files and keep it up to date when I remove usage in my app. It's a real headache and would force me to find another solution than connect-assets :(
• Would the performance be worse?

Development environment renders a single script tag

When in development, I'm only seeing a single script tag, which points to what appears to be a plain-text version of my manifest file.

However, if I switch to production, everything works as expected.

stylus @import-ed dependencies don't reload

Great port. Coffeescript and Stylus is everything I need. I've tried to write it by myself.
Unfortunately, as in title, I found that stylus dependencies don't reload after change. Is it possible to force recompiling in development mode?

"bare" compilation

Is there any support for --bare compilation (ie no lambda wrapping).

This is necessary for webworkers. The issue is discussed here wrt server-side workers pgriess/node-webworker#14. In my case, it's actually client-side workers. I'm trying to set up a JSONP call with importScripts in the client, and there's no namespace to hang the callback on.

importScripts "api.twitter.com?callback=go"
go = -> doSomething()

This doesn't work because of the lambda wrapping. The equivalent in JavaScript does work.

Providing custom functions for Stylus

Stylus allows you to define javascript functions that can be invoked during the processing of your style files. I'm not seeing anyway of passing those custom functions into connect-asset that will then bind them to the Stylus compiler. I can provide my own cssCompiler implementation and use the 'define' function that Stylus provides to accomplish what I need but it would be cleaner if I could just pass in some functions when I create the asset module and have connect-asset tie things together.

Thanks for your consideration.

production mode is slow - benchmark

In development and test mode, it takes about 16ms to load a "Hello World" template. The same template in production it takes around 850ms to request the same page.

This only happens when connect-assets is loaded. When it is removed from the middleware, the page load time is comparable.

I haven't benchmarked individual code paths, but this is not acceptable for a production environment. I will continue to investigate and benchmark.

Provide way to save production-mode JS and CSS to disk

So, in production mode, you get a compiled, concatenated, minified JS file (and a compiled CSS file, if you're using Stylus), but they're just stored in memory. Obviously that's unacceptable for many applications—you might want to use a CDN, or just be able to deploy to a server that doesn't have CoffeeScript and Stylus installed. The question is, how to make those built files available?

(To use those files in production mode, you could set js.root and css.root to URLs, making connect-assets just pass those paths through directly. That won't work with the MD5 hashes, though. Maybe those should be saved in a configuration file in the build dir as well.)

Usage changed?

I used to have

app.use(require('connect-assets')(src:__dirname+'/assets'))

and when I want to server my assets/fname.coffee, I'd throw this piece of html:

<script src="/fname.js" type="text/javascript"></script>

Now it seems this won't work anymore.

I figured out that __dirname doesn't work anymore from #23,

And now it seems that the only way to trigger compilation is by calling the js and css functions.

Having global js and css functions is cool, but why make it the only way to trigger compilation? Why doesn't a simple request to /fname.js trigger the compilation of assets/fname.coffee anymore?

Cannot find module './zlib-sync-bindings'

I'm using node 0.6.1 and npm 1.0.106:

$ npm install connect-assets
$ node

require('connect-assets');
Error: Cannot find module './zlib-sync-bindings'
at Function._resolveFilename (module.js:334:11)
at Function._load (module.js:279:25)
at Module.require (module.js:357:17)
at require (module.js:368:17)
at Object. (/home/dave/Desktop/node_modules/connect-assets/node_modules/connect-file-cache/node_modules/zlib-sync/lib/index.js:1:81)
at Module._compile (module.js:432:26)
at Object..js (module.js:450:10)
at Module.load (module.js:351:31)
at Function._load (module.js:310:12)
at Module.require (module.js:357:17)

haml-coffee

Your lib is awesome and I think it could be even more with haml-coffee support.

https://github.com/9elements/haml-coffee
https://github.com/netzpirat/haml_coffee_assets

What do You think?

Support for stylus url

http://learnboost.github.com/stylus/docs/functions.url.html

Embedded data URI support would be nice, perhaps a flag passed to connect-assets,

url: [paths]

Or something like that so that path support is enabled as well.

Thanks! ^^

JavaScript Minification

CS/JS Minification via UglifyJS would be very useful for production mode.

Extension API

I would like to add haml-coffee compiler which compiles assets/js/templates/articles/show.hamlc to something like window.templates.articles.show = function(params) { return ... } in assets/js/templates/articles/show.js. For now I use terminal watching script for this purpose, but native connect-assets compiler would be much more awesome. Is there any way to do that?

Feature request: Dynamically adding all files in a certain folder

Having to manually use js() and css() for all files to serve is tedious.

Could all coffee and css files in a certain folder be added automatically?

Set correct mime type when serving compiled coffee-script

When sending the compiled js code back to the client it should have the Content-Type of text/javascript. It is currently being served as text/plain.

Support for cluster?

I don't know if anyone has been succeeded in using connect-assets with cluster. When I tried, I got 404 error for my assets js! The css files can be surprisingly loaded without any problems. I have only tested local.

The problems may be caused by how the js cached? If I typed in the url to the js-files manually, they can be loaded. I think it's because the workers cannot find the generated js-files which were created by other workers.

Any plan to support LESSCSS ?

Hi,
I just want to know if there is any plan to support Lesscss in addition to Stylus as a CSS preprocessor in a near future ?

node 0.6.2 support

node -v
v0.6.2

npm install connect-assets
Error: npm doesn't work with node v0.6.2
Required: [email protected] || 0.5
at /usr/local/lib/node_modules/npm/bin/npm-cli.js:57:23
at Object. (/usr/local/lib/node_modules/npm/bin/npm-cli.js:77:2)
at Module._compile (module.js:432:26)
at Object..js (module.js:450:10)
at Module.load (module.js:351:31)
at Function._load (module.js:310:12)
at Array.0 (module.js:470:10)
at EventEmitter._tickCallback (node.js:192:40)

minification support

As a developer I should have the ability to provide concatenation and minification os css and javascript assets.