Skip to content

Instantly share code, notes, and snippets.

@caridy
Last active December 19, 2015 18:48
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save caridy/6000858 to your computer and use it in GitHub Desktop.
Save caridy/6000858 to your computer and use it in GitHub Desktop.

What is this?

This is a script that you can add to your application to generating yui meta data and compiling yui modules using express-yui and locator. As a result, a build folder will be generated with everything that was compiled.

How does this work?

Locator walks the folder structure for your app, and finds any yui module, including build.json or just traditional *.js files with the corresponding YUI.add() statement. Generating the result of the operation as well as the metadata associated to each module.

Under the hood, it uses shifter to generate almost everything that is needed.

How to use this?

Provision

  • Add or update package.json to have the dependencies. It is required to have at least the package name.
  • Copy build.js into the app folder.

Installation

  • npm install to install all dependencies

Build

  • node build.js to run the build process.

After the build process finishes, you will get 3 things:

  • the path to the folder with the build files, you can push this to CDN or use it in any way you want.
  • the configuration that you should apply to YUI in order to use those files that were generated organized by groups.
  • one or more urls that you should include in your application before creating a YUI instance.

YUI Core

Whatever is in extendedCore array from yui config, should be pushed into YUI.Env.core array, so loader knows about new app level modules. Here is an exmaple of a code you can add to your app right before creating a new YUI() instance:

YUI.Env.core.push.apply(YUI.Env.core, YUI_config.extendedCore || []);

Without that line, custom modules cannot be loaded thru Y.use().

Some other considerations

  • You can add your own custom configs by calling app.yui.applyConfig() before locator instance is created.
  • You can customize groups, default combo handler, etc. Check express-yui docs to learn how to do it.
  • express-yui relies on nodejs environment configuration to switch between development and production mode, and depending on that it will generate configurations, you should set up nodejs in production mode to generate the final production configuration. This does not affects the build folder though.
  • You can make build.js executable :)
  • You can plug more things into locator, for example, locator-handlebars to compile *.handlebars files into yui modules.
  • You can write the yui config generated by express-yui into disk, and the same for seed files.
var express = require('express'),
Locator = require('locator'),
app = express();
require('express-yui').augment(app);
new Locator({
buildDirectory: 'build'
})
.plug(app.yui.plugin({
registerGroup: true
}))
.parseBundle(__dirname, {}).then(function () {
console.log('Groups generated under: ' + __dirname + '/build');
console.log('YUI_config = ' + JSON.stringify(app.yui.config()));
console.log('Seed files: ' + app.yui.getSeedUrls());
}, function (err) {
console.error(err);
console.error(err.stack);
});
{
"name" : "demo-app",
"description": "Demo App that uses express-yui and locator to generate YUI metas",
"version" : "0.1.0",
"author" : "Caridy Patino <caridy@gmail.com> (http://github.com/caridy)",
"private" : true,
"engines": {
"node": ">=0.8.0",
"npm" : ">=1.2.0"
},
"devDependencies": {
"express" : "3.3.x",
"express-yui" : "latest",
"locator" : "latest",
"yui" : "3.10.x"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment