Pure asset management for Node/Express, using globs and compatible with Gulp.
Juggling different sets of assets for production, development, staging, etc? ConveyorBelt is a tiny Node.js module for loading different groups of front-end assets, depending on current environment. It uses globs so it plays nicely with Gulp, and you can use it with any build tool or Node framework.
It's time to get rid of those if (NODE_ENV === ...)
statements!
npm install conveyor-belt --save
// Get an instance by supplying a number of environment configurations and current environment.
// Current environment must match one of the supplied environment configurations.
var conveyorBelt = require("conveyor-belt")({
development: {
scripts: [
"bower/angular/angular.js"
"assets/js/**/*.js",
"!excluded.js"
],
styles: [
"bower/normalize-css/normalize.css",
"assets/css/**/*.css",
]
},
production: {
scripts: [
"public/app.min-*.js"
],
styles: [
"public/app.min-*.css"
]
}
}, process.env.NODE_ENV)
// Set assets to be accessible to the view. If you're using Express:
var app = require("express")()
app.locals.assets = conveyorBelt.assets
// You can also set it on the actual response, per request:
// app.use(function(req, res, next) {
// res.locals.assets = conveyorBelt.assets
// next()
// })
// Or attach it as an Express middleware:
// app.use(conveyorBelt.middleware.bind(conveyorBelt))
// Job done. Paths are now available in the view!
Optional - separate environment configs into a separate module (e.g. config.js
):
module.exports = {
development: {
scripts: [
"bower/angular/angular.js"
"assets/js/**/*.js",
"!assets/js/excluded.js"
],
styles: [
"bower/normalize-css/normalize.css",
"assets/csss/**/*.css",
]
},
production: {
scripts: [
"public/app.min-*.js"
],
styles: [
"public/app.min-*.css"
]
}
}
var config = require("./config")
var conveyorBelt = require("conveyor-belt")(config, process.env.NODE_ENV)
It's entirely up to you how you name your environments (you don't have to call them "development" and "production") and you can have as many as you want (e.g. add "staging"). Same applies for the keys inside each environment ("scripts", "styles", etc), as long as the value is an array of strings (paths or globs). Here's the general format:
{
environment1: {
assetsGroup1: [
"path/to/file.js"
"or/wildcards/**/*.js",
"!excluded.js"
],
assetsGroup2: [
// ...
],
assetsGroupX: [
// ...
]
},
environmentX: {
assetsX: [],
whatever: []
}
}
So that's a perfectly valid config:
var conveyorBelt = require("conveyor-belt")({
superman: {
powers: [
"path/to/powers/*.png"
]
}
}, "superman")
After attaching the middleware, you can access the assets
variable in your templates (set on res.locals). It will contain the same keys in your environment config. Here's an example with Jade that assumes you've specified scripts
and styles
in your environment config:
doctype html
html
head
each style in assets.styles
link(rel='stylesheet', href="/#{style}")
body
each script in assets.scripts
script(src="/#{script}")
Or if you take the superman example before that:
doctype html
html
body
each thing in assets.powers
img(src="/#{thing}")
If you have the same keys in all environment configs ("scripts", etc) then the same code will work in all environments.
Pull requests are more than welcome. Please make your changes in your own branch, make sure the current tests are passing (run with gulp mocha
) and update/add tests if necessary. Run gulp
to get your ES6 code transpiled to ES5.