Transform resources in your Web Component into a deliverable bundle. Use names.json, bower.json or package.json to define where your resources and assets are. Identify JS, CSS, images, fonts, views and templates.

With Browserify and SocketStream can access your bundle and serve it to the browser.

You can use modules of your own in combination with some added using bower.

Installation is via npm:

$ npm install essential-bundle

By default directories in your project are supported as modules. So you can add,

users
+ js/
+ images/
+ fonts/
+ css/
+ views/
+ templates/
+ users.js
+ names.json

Your users.js file would require the submodules inside js/.

var uuid = require('uuid');
exports.account = require('./js/account');
exports.profile = require('./js/profile');

Make sure you fill in main in names.json (or bower.json/package.json) to be users.js.

Add a where section to names.json.

{
	"name":"users",
	"main":"users.js",
	"where": {
		"js": "js/**/*.js",
		"css": "css/**/*.less",
		"views": "views/**/*.html",
		"templates": "templates/**/*.html",
		"assets": ["fonts","images"]
	}
}

In your application you can pull in the users code with require("users"). It will resolve to a module with a combination of js, views, templates.

The simplest way to use this in Gulp is with the browserify like call.

var gulpBundler = require('essential-bundle').gulp;
gulpBundler({
	outputName: 'body.js',
	entries: ['./client/code/site/body.js'], // must start with dot to be relative to cwd
	debug: true // source maps
	})
    .pipe(gulp.dest(destDir));

browserify({
  transforms: ['essential-bundle/browserify-transform']
});

var essentialTransform = require('essential-bundle').browserifyTransform({
	sources: ['app','common']
});
browserify({
  transforms: [essentialTransform]
});

TODO

TODO

This is based on great work from debowerify by Eugene Ware