{"id":16181730,"url":"https://github.com/ericclemmons/grunt-angular-modularize","last_synced_at":"2025-07-04T23:37:25.789Z","repository":{"id":12967283,"uuid":"15645760","full_name":"ericclemmons/grunt-angular-modularize","owner":"ericclemmons","description":"Write AngularJS Modules Once. Build with RequireJS (AMD), Browserify (CommonJS), or simply concat.","archived":false,"fork":false,"pushed_at":"2016-02-20T06:36:57.000Z","size":484,"stargazers_count":22,"open_issues_count":4,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-10T14:52:49.561Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ericclemmons.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE-MIT","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-01-05T04:58:16.000Z","updated_at":"2025-01-02T01:09:58.000Z","dependencies_parsed_at":"2022-07-10T00:01:12.247Z","dependency_job_id":null,"html_url":"https://github.com/ericclemmons/grunt-angular-modularize","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericclemmons%2Fgrunt-angular-modularize","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericclemmons%2Fgrunt-angular-modularize/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericclemmons%2Fgrunt-angular-modularize/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericclemmons%2Fgrunt-angular-modularize/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ericclemmons","download_url":"https://codeload.github.com/ericclemmons/grunt-angular-modularize/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243960361,"owners_count":20375102,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-10T06:26:57.850Z","updated_at":"2025-03-19T01:31:16.211Z","avatar_url":"https://github.com/ericclemmons.png","language":"JavaScript","readme":"# grunt-angular-modularize\n\n[![Build Status](https://travis-ci.org/ericclemmons/grunt-angular-modularize.png)](https://travis-ci.org/ericclemmons/grunt-angular-modularize)\n[![Dependencies](https://david-dm.org/ericclemmons/grunt-angular-modularize.png)](https://david-dm.org/ericclemmons/grunt-angular-modularize)\n[![devDependencies](https://david-dm.org/ericclemmons/grunt-angular-modularize/dev-status.png)](https://david-dm.org/ericclemmons/grunt-angular-modularize#info=devDependencies\u0026view=table)\n\n\u003e Write AngularJS Modules Once.\n\u003e Build with [RequireJS][4] (AMD),\n\u003e [Browserify][5] (CommonJS),\n\u003e or simply [concat][3].\n\nUsing a [Simple Example](https://github.com/ericclemmons/grunt-angular-modularize/tree/master/examples/simple)\nas the input:\n\n- [Simple RequireJS (AMD) Demo](https://rawgithub.com/ericclemmons/grunt-angular-modularize/master/examples/simple/amd.html)\n- [Simple RequireJS (AMD) Output](https://github.com/ericclemmons/grunt-angular-modularize/tree/master/test/simple/amd/app)\n- [Simple Browserify (CommonJS) Demo](https://rawgithub.com/ericclemmons/grunt-angular-modularize/master/examples/simple/cjs.html)\n- [Simple RequireJS (CommonJS) Output](https://github.com/ericclemmons/grunt-angular-modularize/tree/master/test/simple/cjs/app)\n\n*These demos may need to be refreshed upon loading.*\n\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Examples](#examples)\n- [Options](#options)\n- [Changelog](#changelog)\n- [License](#license)\n\n\n## Installation\n\n*This plugin requires [Grunt][1] `~0.4.1`*\n\nInstall the plugin:\n\n```shell\n$ npm install grunt-angular-modularize --save-dev\n```\n\nEnable the plugin within your `Gruntfile.js`\n\n```js\ngrunt.loadNpmTasks('grunt-angular-modularize');\n```\n\n\n## Usage\n\n\n### 1. Properly structure your AngularJS app\n\n- Each file should be it's own standalone module\n- The module name should be able to map to the folder it's in.\n(e.g. `admin.controllers.home` may reside in `public/scripts/admin/controllers/home.js`)\n- Each file should only require modules that it needs.\n- You should use a unique namespace to describe your app to make it easier to separate sections. (e.g. `admin` instead of `app`).\n- The root of each section (e.g. `admin.js`) should live within a folder of that namespace and not outside of it.\n(e.g. `path/to/src/admin/admin.js` alongside `path/to/src/admin/controllers/home.js`)\n- Vendors/Components live **outside** of your application.\n\nYou'll end up with files that are really light \u0026 clean like:\n\n```js\n// path/to/src/admin/admin/controllers/home.js\nangular\n  .module('admin.controllers.home')\n  .controller('HomeController', [\n    '$scope',\n    function($scope) {\n      ...\n    }\n  ])\n;\n```\n\n\n### 2. Modify `Gruntfile.js`\n\n*See the [options](#options) below for detailed usage for each option**.\n\n```js\nngmodularize: {\n  admin: {\n    options: {\n      format:   'amd',                    // Can be `cjs` for CommonJS\n      requires: ['admin'],                // Used for RequireJS's `main` file...\n      paths:    {                         //\n        admin:  'admin'                   //\n      }                                   //\n    },\n    src:        'path/to/src/admin.js',   // admin entry-point\n    dest:       'path/to/build/admin.js'  // AMD-version of admin entry-point\n  }\n}\n```\n\n\n### 3. Run `grunt ngmodularize`\n\n```shell\n$ grunt ngmodularize\n```\n\nThis will automatically traverse the entry-point specified in `src` for all\ndependencies with a known path (via `paths`) and write out the corresponding\nstructure alongside the `dest` file.\n\n\n### 4. Building \u0026 Optimization\n\nIf you're using [grunt-contrib-requirejs][4] (AMD) or [grunt-browserify][5] (CommonJS),\ntheir tasks are automatically configured for you!\n\nSimply run the appropriate command:\n\n```shell\n$ grunt ngmodularize requirejs\n```\nor\n```shell\n$ grunt ngmodularize browserify\n```\n\nCouple this with [grunt-angular-templates][6], and your entire application\ncan be reduced to one or two HTTP requests!\n\n\n## Examples\n\n### Concatenation\n\n- Uses [grunt-contrib-concat][3].\n- Easy to setup.\n- Only reference build file, not hundreds of individual files.\n- Stack trace line numbers don't match source.\n- Does not require this plugin.\n\nWith a properly structured app (one module per file), AngularJS's DI\nhandles dependency ordering for you.\n\nSimply add the following to your `Gruntfile.js`:\n\n```js\nconcat: {\n  admin: {\n    src:  'path/to/src/admin/**/*.js',\n    dest: 'path/to/build/admin/admin.build.js'\n  }\n},\n```\n\nNow, your `index.html` only has to reference one script from now on:\n\n```html\n\u003cscript src=\"path/to/build/admin/admin.build.js\"\u003e\u003c/script\u003e\n```\n\nCouple the `concat` task or a `\u003cscript\u003e` tag with [grunt-angular-templates][6],\nand avoid HTTP requests for your templates.\n\n\n### RequireJS (AMD)\n\n- Uses [grunt-contrib-requirejs][4].\n- Fairly easy to setup.\n- Client-side lazy loading of modules.\n- Stack trace line numbers matches source.\n\nSimply add the following to your `Gruntfile.js`:\n\n```js\nngmodularize: {\n  admin: {\n    options: {\n      format:   'amd',\n      requires: ['admin/admin'],  // Entry-point: `path/to/src/admin/admin.js`\n      paths: {\n        admin:  '../admin'        // Namespace path: `path/to/src/admin/*`\n      }\n    },\n    src:        'path/to/src/admin/admin.js',\n    dest:       'path/to/build/admin/admin.js'\n  }\n}\n```\n\nNow your modules will look like:\n\n```js\ndefine([...], function() {\n\n  ...\n\n});\n```\n\nAdditionally, alongside your `admin/admin.js`, there will be a RequireJS\n`admin/main.js`, which is automatically configured for AngularJS to work\nwith RequireJS!\n\nAdd the following to your `index.html`:\n\n```html\n\u003cscript src=\"path/to/bower_components/requirejs/require.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"path/to/build/admin/main.js\"\u003e\u003c/script\u003e\n```\n\nLater, when you optimize with `$ grunt ngmodularize requirejs`, your HTML can then have:\n\n```html\n\u003cscript src=\"path/to/build/admin/main.dist.js\"\u003e\u003c/script\u003e\n```\n\nNotice the `.dist.js` extension?  This is automatically configured in the `requirejs`\ntarget for you!\n\n\u003e But what about using RequireJS to require vendor dependencies, such as\n\u003e `angular`, `require`, `bootstrap`, and other stuff!?\n\nVendors are external, application dependencies that should\nexist in the environment.  That's what NPM \u0026 Bower are for.  Those problems\nare solved.\n\n\n### Browserify (CommonJS)\n\n- Uses [grunt-browserify][5].\n- Fairly easy to setup.\n- Requires running `$ grunt browserify` to run in the client.\n- Allows usage of NodeJS/CommonJS/NPM packages within application.\n\nSimply add the following to your `Gruntfile.js`:\n\n```js\nngmodularize: {\n  admin: {\n    options: {\n      format:   'cjs',\n      paths: {\n        admin:  '../admin' // Root path when generating other `require(...)`s\n      }\n    },\n    src:        'path/to/src/admin/admin.js',\n    dest:       'path/to/build/admin/admin.js'\n  },\n}\n```\n\nNow, you only need the following in your `index.html`:\n\n```html\n\u003cscript src=\"path/to/build/admin/admin.js\"\u003e\u003c/script\u003e\n```\n\nLater, when you optimize with `$ grunt ngmodularize browserify`,\nyour HTML can then have:\n\n```html\n\u003cscript src=\"path/to/build/admin/admin.dist.js\"\u003e\u003c/script\u003e\n```\n\nAgain, the configuration of the `browserify` task has been handled for you\nto create a `.dist.js` version.\n\n\n## Options\n\n*See the [Examples](#examples) for actual use-cases*.\n\n\n### format\n\n\u003e Module format to convert to\n\n- `amd`: RequireJS (AMD)\n- `cjs`: Browserify (CommonJS)\n\n\n### paths\n\n\u003e Namespaces \u0026 their corresponding paths, **relative to the entry-point**\n\n```js\npaths: {\n  'admin.controllers':  '../admin/ctrls',\n  'admin':              '../admin'\n}\n```\n\nIn this example, the module `admin` would expect to be found at `admin/admin.js`,\nwhile `admin.controllers.home` would be found at `admin/ctrls/home.js`.\n\n**Whichever namespace matches the module first wins**.\n\nIn the event you don't have an explicit folder for your application\n(e.g. everything lives in `/scripts`), then you can use the following:\n\n```js\npaths: {\n  'admin':  '.'\n}\n```\n\nIn this example, the `admin` modules would be found in `scripts/admin.js`,\nwhile `admin.controllers.home` would be found in `scripts/controllers.home`.\n\nBy specifying the root of the `admin` namespace as the current folder (`.`),\nthe namespace has been effectively nullified.\n\n\n### requires\n\n\u003e Array of RequireJS paths to require.\n\nYou usually only need to put in the web-accessible relative path to the\nentry-point of your application.\n\n\n## Changelog\n\n- v0.1.0 – Initial release\n\n## License\n\nCopyright (c) 2014 Eric Clemmons Licensed under the MIT license.\n\n\n[1]: http://gruntjs.com/\n[2]: https://github.com/ericclemmons/grunt-angular-modularize/tree/master/examples\n[3]: https://github.com/gruntjs/grunt-contrib-concat\n[4]: https://github.com/gruntjs/grunt-contrib-requirejs\n[5]: https://github.com/jmreidy/grunt-browserify\n[6]: https://github.com/ericclemmons/grunt-angular-templates\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fericclemmons%2Fgrunt-angular-modularize","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fericclemmons%2Fgrunt-angular-modularize","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fericclemmons%2Fgrunt-angular-modularize/lists"}