A wrapper for common tasks in a frontend project, using Gulp, Browserify and friends.
$ npm install -g ngbuilder
Write a modular/pluggable app builder that does the common things of AngularJS projects through plugins that wrap gulp tasks (watch, uglify, browserify, cssmin, ngAnnotate...)
.jsfiles inside a "/src" folder. Angular annotations in the sources are handled with ng-annotate. ES6 syntax is handed to traceur. The files go through JSHint to check for common mistakes. The sources are concatenated, and the result is write to
index.jsin the module root. The name "index.js" has a reason: Browserify can find it with a simple
.scss/.less/.whateverfiles in a "scss/less/whatever" folder, then the plugin outputs a
module.cssfile in the module root
.htmlpartials) in a "views" folder and they are bundled as JS files, using AngularJS
$templateCache. The views are saved to
The steps above will generate some files that can be put together to make an app. For the JS files, browserify can generate a final bundle with all the dependencies.
Plugins are really simple to write. They're just Gulp wrappers.
See the usage options right from the command-line. On a terminal, run this:
Each module should have a structure similar to this:
/src module JS sources (expected: module.js + **/*.js) /views HTML partials (mostly directive templates) /test Unit tests /scss SCSS sources // soon /i18n Translation tables
Apps follow the same structure of a module. Modules and apps are barely the same
thing. The only difference is that an
app will import all the module it needs
and have them declared as module dependencies.
So, if your app called
store as module dependencies,
your app would be like this:
var $module = angular.module('foo', ['user', 'store']); export $module; $module.controller('MyCtrl', ...) // ...
Since we have Browserify and ES6 support built-in, you would do it this way:
import user from 'user'; import store from 'store'; angular.module('foo', [user.name, store.name]); // ...
The reason for this is:
The ES6 modules syntax will be converted to
require() syntax to be used by
Browserify. It is also super clean and beautiful :D
Each module you import will be actually a reference to the Angular's
object (that one returned by
angular.module('modulename')), which has a
property. So, using this property, you are actually pointing to that module.
Module stats last updated: 2015-04-19 12:38:15