Asset concatenation about hackathon-starter HOT 9 CLOSED

@sixFingers When I found connect-assets (which also uses snockets), it was exactly what I was looking for - completely transparent way to minify and concatenate files. Unfortunately I couldn't find any concrete examples on the web.

What is this //= require dependency?

My second issue - it was not inserting a single concatenated javascript file, instead it would create a minified/concatenated JS file in assetsDir but would not reference it in HTML, as I presume it should. And I did set NODE_ENV=production beforehand. I really like this approach, no need for Gruntfile, everything just happens automatically, so as long as user agrees to define css and html via
js() and css() functions.

from hackathon-starter.

@sahat connect-assets basically mimics Rail's asset pipeline.
The situation is supposed to be:

• You have one or more stylesheets (.css, .less or .styl) you want to concatenate
• You have one or more scripts (.js, or .coffee) you want to concatenate

Let's suppose the dir folder is like

/assets
  /js
    /lib
      jquery
      underscore
  /css
    /lib
      bootstrap.less
      style.less

You then create one or more files which basically list the resources to be concatenated:

// application.js
//= require lib/jquery
//= require lib/underscore

// application.css
//= require lib/bootstrap
//= require lib/style

You finally tell connect which files should be built (in this case, in a Jade template):

!= css('application')
!= js('application')

It doesn't automatically reference it in the HTML, instead, it understands what files you want to build when it encounters one or more js() or css().
This doesn't force however to use concatenation in every case. It's still fully possible to load separated assets in the usual way.
Setting NODE_ENV is normally a way to load different setups / configs depending on the environment. In my case, when deploying to Heroku, i split some configs in the usual development, production, test and use that NODE_ENV to load the correct config. This is useful in the case of connect-assets since i normally keep things not concatenated on the development machine to ease debugging, and then have them concatenated on production.

from hackathon-starter.

@sixFingers Does it then require you to have an extra file, application.js, in this case just to reference other JS files in order to enable a concatenated minified file in production?

from hackathon-starter.

@sahat yes basically application.js (or any other name at your choice) contains directives of inclusion, and the concatenated file resulting will be application.js. The same goes for stylesheets. I use it in a lot of projects and am pretty happy with it, it gives an easy path for code modularization without resorting to js-specific build stacks.

from hackathon-starter.

@sixFingers Do you have a code example of how you are using connect-assets to minify/concatenate in production mode and leave as it as is in development mode? Or preferrably if you have a repo so I could see the whole process to then decide whether this approach is justified in increasing complexity of the boilerplate.

It's just even if I add instructions to README.md: "You must reference JS files in layout.jade via != js('library_name'), I presume many people will just download the boilerplate project and continue developing web apps the way they are used to. And those who haven't read the note, will be confused by this new weird syntax when they open layout.jade. That's why, fewer moving parts the better, even when it's not the most efficient way to do it.

from hackathon-starter.

connect-assets is now in master branch.

from hackathon-starter.

@sixFingers I just noticed that in development mode, connect-assets won't pre-compile LESS files. As a result each page load takes extremely long time. I presume it compiles all LESS files on the fly. In production mode it's fine. Do you know how to get around this by forcing it to compile LESS files in development mode, similar to how less-middleware library does it?

from hackathon-starter.

@sahat This is intended, since normally on development envs a developer wants to debug non obfuscated, non compressed code. If not explicitly set, connect-assets will rely on NODE_ENV to decide if concatenation should be applied, or not. To override this, it's enough to pass {build: true}:

var connectAssets = require('connect-assets'):
app.use(connectAssets({build: true}));

from hackathon-starter.

Thanks!

from hackathon-starter.