grunt-wildamd

Grunt task to generate AMD namespace modules from module dependencies that use globbing (pattern matching) syntax

grunt-wildamd

####Description Grunt task to generate AMD namespace modules from module dependencies that use globbing (pattern matching) syntax. Designed specifically for RequireJS but can be used with any AMD loader with the only exception being that the RequireJS plugin and requireConfigFile option won't be very helpful. Basically extends an AMD loader to be a better 'automated' script loader, capable of loading directories, sub-directories, and other glob patterns right in production code.

$ npm install grunt-wildamd
$ bower install grunt-wildamd

####Why?

  • (RequireJS) AMD loading is overwhelming
  • Script loading should be easier with more modules
  • Namespace modules should be easier to make
  • Combine the philosophy of modularization with AMD script loading
  • I like automation

####Common Usages

  • Intuitive multiple script loading
  • Load 'plugable' modules
  • Recurse modules in a particular location
  • Easier namespacing in the browser

####Old way...

define('stuff', [
    'pirate',
    'turtle',
    'ship',
    'dragon',
    'purple-people-eater'
], function (ptsd) {
    return {
        'pirate': p,
        'turtle': t,
        'ship': s,
        'dragon': d
    };
});
 
require([
    'stuff'
], function (stuff) {
    for (var s in stuff) {
        console.log(s);
    }
});
 

####New way!

 
// Load 'namespaces' for entire application in 'main' 
 
require([
    'stuff/*'
], function (stuff) {
    for (var s in stuff) {
        console.log(s);
    }
});
 

####Setup

1.) Install npm install grunt-wildamd

2.) Update your Gruntfile.js

grunt.initConfig({
    wildamd: {
        app: {
            src: ["./**/*.js"],
            dest: "./namespaces.js",
            options: {
                requireConfig: "./config/main.js"
            }
        }
    }
});
 
grunt.loadNpmTasks("grunt-wildamd");
 
grunt.registerTask('default', ['wildamd']);

3.) Use any globbing pattern you want for a dependency!

4.) Rung grunt or grunt wildamd to generate the namespace modules - Read more on running grunt tasks

5.) Remember to load namespaces.js for the application to use your generated namespace modules

require.config({
    baseUrl: "../",
    namespaces: {
        'stuff': "stuff/*"
    }
});
 
define('main', [
    // Load 'globals' 
    'namespaces'
 
], function () {
    require([
        'client',
        'stuff'
 
    ], function (clientstuff) {
        client.connect(stuff.host);
    });
});

####Options

  • {String} requireConfig - Grabs baseUrl and paths from require.conf ig - Manually setupbaseUrlandpathsconfiguration from yourGruntfile.js`
  • {String:see src} template - Sets the grunt.template used to generate namespace modules
  • {Boolean:false} keepExisting - Indicates if the destination should be deleted before it's run
  • {boolean:false} useFileNames - Indicates if the namespace module fields should use the file names or their equivalent snake case names
  • {boolean:true} timed - Logs time taken for the task to complete

####Wildamd RequireJS Plugin Included is the RequireJS plugin 'wildamd' that normalizes input to load the namespace module. No need to use ~ to indicate globbing not, or remember if your namespace module was encapsulated with []. Here's an example

define([
    'wild![components/*, services/*]', // Rendered in dest as 'components/*, services/*' not '[components/*, services/*' 
    'wild![**/*, !*-temp]' // Use of '!' 
], function (comall) {
    /* ... */
});

####Additional require.config Configuration Within the require.config function call in the requireConfig file one of the fields can define additional namespace modules all in one place along with a 'shorthand path'

require.config({
    baseUrl: "../",
    namespaces: {
        'components': "[components/*]"
    }
});
 
define([
    'components'
], function (com) {
 
});

####Load Patterns with other RequireJS Plugins Along with specifying the globbing pattern and the namespace module name there's also a way to load namespace dependencies with other RequireJS plugins with angle brackets.

define([
    '<json>translations/*.json',
    'wild!<json>[translations/*.json]',
    '<text>[translations/*.xliff]'
], function (translations) {
 
});

####Plugable Modules - Other The biggest feature this grunt task gives the client is the ability to recurse over modules. By doing so you give the current controlling module the ability to manage itself, it's dependencies, and it's functionality.