grunt-angular-modularize
v0.1.0
Published
Easily convert angular.modules to be AMD/CommonJS-compatible
Downloads
31
Readme
grunt-angular-modularize
Write AngularJS Modules Once. Build with RequireJS (AMD), Browserify (CommonJS), or simply concat.
Using a Simple Example as the input:
- Simple RequireJS (AMD) Demo
- Simple RequireJS (AMD) Output
- Simple Browserify (CommonJS) Demo
- Simple RequireJS (CommonJS) Output
These demos may need to be refreshed upon loading.
Table of Contents
Installation
This plugin requires Grunt ~0.4.1
Install the plugin:
$ npm install grunt-angular-modularize --save-dev
Enable the plugin within your Gruntfile.js
grunt.loadNpmTasks('grunt-angular-modularize');
Usage
1. Properly structure your AngularJS app
- Each file should be it's own standalone module:
angular
.module('admin.controllers.home')
.controller('HomeController', [
'$scope',
function($scope) {
...
}
])
;
- The module name should be able to map to the folder it's in.
(e.g.
admin.controllers.home
may reside inpublic/scripts/admin/controllers/home.js
) - Each file should only require modules that it needs.
- You should use a unique namespace to describe your app to make it easier to separate sections. (e.g.
admin
instead ofapp
). - The root of each section (e.g.
admin.js
) should live within a folder of that namespace and not outside of it. (e.g.path/to/src/admin/admin.js
alongsidepath/to/src/admin/controllers/home.js
)
2. Modify Gruntfile.js
See the options below for detailed usage for each option*.
ngmodularize: {
admin: {
options: {
format: 'amd', // Can be `cjs` for CommonJS
requires: ['admin'], // Used for RequireJS's `main` file...
paths: { //
admin: 'admin' //
} //
},
src: 'path/to/src/admin.js', // admin entry-point
dest: 'path/to/build/admin.js' // AMD-version of admin entry-point
}
}
3. Run grunt ngmodularize
$ grunt ngmodularize
This will automatically traverse the entry-point specified in src
for all
dependencies with a known path (via paths
) and write out the corresponding
structure alongside the dest
file.
4. Building & Optimization
If you're using grunt-contrib-requirejs (AMD) or grunt-browserify (CommonJS), their tasks are automatically configured for you!
Simply run the appropriate command:
$ grunt ngmodularize requirejs
or
$ grunt ngmodularize browserify
Couple this with grunt-angular-templates, and your entire application can be reduced to one or two HTTP requests!
Examples
Concatenation
- Uses grunt-contrib-concat.
- Easy to setup.
- Only reference build file, not hundreds of individual files.
- Stack trace line numbers don't match source.
- Does not require this plugin.
With a properly structured app (one module per file), AngularJS's DI handles dependency ordering for you.
Simply add the following to your Gruntfile.js
:
concat: {
admin: {
src: 'path/to/src/admin/**/*.js',
dest: 'path/to/build/admin/admin.build.js'
}
},
Now, your index.html
only has to reference one script from now on:
<script src="path/to/build/admin/admin.build.js"></script>
Couple the concat
task or a <script>
tag with grunt-angular-templates,
and avoid HTTP requests for your templates.
RequireJS (AMD)
- Uses grunt-contrib-requirejs.
- Fairly easy to setup.
- Client-side lazy loading of modules.
- Stack trace line numbers matches source.
Simply add the following to your Gruntfile.js
:
ngmodularize: {
admin: {
options: {
format: 'amd',
requires: ['admin/admin'], // Entry-point: `path/to/src/admin/admin.js`
paths: {
admin: '../admin' // Namespace path: `path/to/src/admin/*`
}
},
src: 'path/to/src/admin/admin.js',
dest: 'path/to/build/admin/admin.js'
}
}
Now your modules will look like:
define([...], function() {
...
});
Additionally, alongside your admin/admin.js
, there will be a RequireJS
admin/main.js
, which is automatically configured for AngularJS to work
with RequireJS!
Add the following to your index.html
:
<script data-main="path/to/build/admin/main.js" src="path/to/bower_components/requirejs/require.min.js"></script>
Later, when you optimize with $ grunt ngmodularize requirejs
, your HTML can then have:
<script data-main="path/to/build/admin/main.dist.js" src="path/to/bower_components/requirejs/require.min.js"></script>
Notice the .dist.js
extension? This is automatically configured in the requirejs
target for you!
Browserify (CommonJS)
- Uses grunt-browserify.
- Fairly easy to setup.
- Requires running
$ grunt browserify
to run in the client. - Allows usage of NodeJS/CommonJS/NPM packages within application.
Simply add the following to your Gruntfile.js
:
ngmodularize: {
admin: {
options: {
format: 'cjs',
paths: {
admin: '../admin' // Root path when generating other `require(...)`s
}
},
src: 'path/to/src/admin/admin.js',
dest: 'path/to/build/admin/admin.js'
},
}
Now, you only need the following in your index.html
:
<script src="path/to/build/admin/admin.js"></script>
Later, when you optimize with $ grunt ngmodularize browserify
,
your HTML can then have:
<script src="path/to/build/admin/admin.dist.js"></script>
Again, the configuration of the browserify
task has been handled for you
to create a .dist.js
version.
Options
See the Examples for actual use-cases.
format
Module format to convert to
amd
: RequireJS (AMD)cjs
: Browserify (CommonJS)
paths
Namespaces & their corresponding paths, relative to the entry-point
paths: {
'admin.controllers': '../admin/ctrls',
'admin': '../admin'
}
In this example, the module admin
would expect to be found at admin/admin.js
,
while admin.controllers.home
would be found at admin/ctrls/home.js
.
Whichever namespace matches the module first wins.
In the event you don't have an explicit folder for your application
(e.g. everything lives in /scripts
), then you can use the following:
paths: {
'admin': '.'
}
In this example, the admin
modules would be found in scripts/admin.js
,
while admin.controllers.home
would be found in scripts/controllers.home
.
By specifying the root of the admin
namespace as the current folder (.
),
the namespace has been effectively nullified.
requires
Array of RequireJS paths to require.
You usually only need to put in the web-accessible relative path to the entry-point of your application.
Changelog
- v0.1.0 – Initial release
License
Copyright (c) 2014 Eric Clemmons Licensed under the MIT license.