cartero

by rotundasoftware

rotundasoftware / cartero

Modular front end development for multi-page web applications.

208 Stars 24 Forks Last release: Not found MIT License 845 Commits 39 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

cartero

cartero is an asset pipeline built on npm and browserify that allows you to easily organize front end code in multi-page web applications into reusable packages containing HTML, JavaScript, css, and images.

Build Status

Overview

cartero eliminates the friction involved in applying modular design principles to front end assets in multi-page web applications. Use directories to group together assets (js, css, images, etc.) for each UI component, and cartero will take care of ensuring that all the appropriate assets are then loaded on the pages that require them, and just those pages. Depending on a package is as simple as

require( 'pork-and-beans' )
. And since cartero is built on npm, the official node.js package manager, you can easily publish your packages and / or depend on other npm packages in your own code.

A package might contain assets for

  • A calendar widget
  • A popup dialog
  • A header or footer
  • An entire web page

cartero is a build tool. It does not introduce many new concepts, and the same modular organizational structure it facilitates could also be achieved by stringing together other build tools and the appropriate

, 
, and 
tags. However, using cartero is, well, a hell of a lot lot easier.

See this article for more info on how cartero compares to other tools, and this tutorial to get started.

Command line usage

Build all assets for a multi-page application with the cartero command. For example,

$ cartero "./views/**/index.js" "./static/assets"

This command will gather up the js and other assets required by each JavaScript entry point matching the first argument (in this case, all

index.js
files in the
views
directory), and drop the compiled assets into the output directory specified in the second argument, along with information used at run time by the hook, to load the appropriate assets for each entry point.

cartero only processes each asset one time, so compiling assets for many entry points at once is extremely efficient. Each additional entry point adds practically no overhead. cartero also separates out any JavaScript assets that are used by all your entry points into a common bundle, so that the browser cache can be leveraged to load any shared logic quickly on each page. (This magic is done by factor-bundle - thanks for your wizardry, James!)

Adding a

-w
flag to the cartero command will run cartero in watch mode so that the output is updated whenever assets are changed. Again, cartero's watch mode is extremely efficient, only rebuilding what is necessary for a given change.

The hook

At run time, your application needs to be able to easily figure out where assets are located. For this reason, cartero provides a small (< 100 LOC) runtime library that your server side logic can use to look up asset urls or paths based on a simple map output by cartero at build time. At the time of this writing, only a hook for node.js is available, but one can quickly be written for any server side environment.

For example, if

views/page1/index.js
is an entry point, the following call will return all the
script
and
link
tags needed to load the js and css bundles it requires:
h.getTagsForEntryPoint( 'views/page1/index.js', function( err, scriptTags, styleTags ) {
  // scriptTags and styleTags and strings of 

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.