• Concat
• AML
• AMD

There are three approach for using recipe.

This is simple approach and doesn't use recipe.js.

grunt-recipe generates concatenated every dependent files in each libraries.

//Gruntfile.js
grunt.initConfig({
  recipe: {
    options: {
      type: 'Concat',    // Concat, AML, AMD
      minTask: 'uglify', // Minify task name. ignore min when value is `false`
      minSuffix: '.with-deps.js',  // Minified source suffix
      unpackSuffix: '.with-deps.unpack.js' // Unpacked source suffix
    }
  }
});

You can use concatenated library script only. It means not required to embedded depended libraries manually.

AML(Asynchronous Module Loading) is loading modules asynchronously. This approach doesn't narrowing variable scope and not use AMD API(define).

grunt-recipe generates recipe.js, recipe.version.js, recipe.dependencies.js and libraries.

//Gruntfile.js
grunt.initConfig({
  recipe: {
    options: {
      type: 'AML',    // Concat, AML, AMD
      minTask: 'uglify', // Minify task name. ignore min when value is `false`
      minSuffix: '.js',  // Minified source suffix
      unpackSuffix: '.unpack.js' // Unpacked source suffix
    }
  }
});

You need to create menu script then embedded recipe.js script with menu name within data-menu attribution onto HTML. if the library namespace is exists in menu, recipe.js will load all depended libraries before loading the library.

//foo.js ( menu script )
recipe({
  libraries: [
    "jQuery",
    "jQuery.fn.foo"
  ]
}).then(function($, foo){
  $("div").foo();
})

<!-- recipe.js -->
<script src="/path/to/recipe.js" data-menu="foo" ></script>

AML(Asynchronous Module Loading) is loading modules asynchronously and using AMD API(define).

grunt-recipe generates recipe.js, recipe.version.js, recipe.amd.dependencies.js and libraries. Generated libraries is surrounded code with below automatically. so you doesn't have to use define function manually.

// generated libraries
define('${namespace}', [${dependencies}...], function(${dependencies}...){
  // your code will in here
  return ${namespace};
});

//Gruntfile.js
grunt.initConfig({
  recipe: {
    options: {
      type: 'AMD',    // Concat, AML, AMD
      minTask: 'uglify', // Minify task name. ignore min when value is `false`
      minSuffix: '.amd.js',  // Minified source suffix
      unpackSuffix: '.amd.unpack.js' // Unpacked source suffix
    }
  }
});

You need to create menu script then embedded recipe.js script with menu name within data-menu attribution onto HTML. if the library namespace is exists in menu, recipe.js will load all depended libraries before loading the library.

//foo.js ( menu script )
recipe({
  libraries: [
    "jQuery",
    "jQuery.fn.foo"
  ],
  AMD: true
}).then(function($, foo){
  $("div").foo();
})

<!-- recipe.js -->
<script src="/path/to/recipe.js" data-menu="foo" ></script>

• dependencies -> deps
• amd -> AMD

{
  "baseUrl":"",
  "defaults":{
    "Concat": {
      "dest": ""
    },
    "AML": {
      "dest": ""
    },
    "AMD": {
      "dest": ""
    }
  },
  "define":{
    "jQuery": {
      "path": "src/lib/jquery-1.9.1.js",
      "deps": [],
      "Concat": {
        "dest": "",
        "include": true
      },
      "AML": {
        "dest": "",
        "url": ""
      },
      "AMD": {
        "dest": "/path/to/amd/dist",
        "url": "/path/to/jquery.amd.js",
        "exports": "jQuery", // Use desinated namespace for exports
        "useOriginal": true // Grunt task does not surround with define function automatically
      }
    }
  }
}

All generated script file append MD5 suffix which is encoded by file contents. recipe dependencies file use above URL. recipe dependencies is also appended MD5 suffix. recipe version use above dependencies MD5.

<script src="path/to/recipe.js" data-menu="foo" data-version="827ccb0eea8a706c4c34a16891f84e7b" >

Add data-version attribution onto script tags if you want specified version by some reasons. recipe.js will use specified version instead of recipe.version.js

localStorage.setItem('recipe.version', '827ccb0eea8a706c4c34a16891f84e7b')

You can also specified version by storing version to localStorage. This function will output version on console.