gulp-ng-autobootstrap

Automatically generate bootstrap files for your browserify-powered angular apps that pull in all your angular modules (like controllers and directives) for you.

Inspired by ng-classify.

Usage

1. Install via npm

npm install gulp-ng-autobootstrap

2. Include in your gulp file

var ngAutoBootstrap = require('gulp-ng-autobootstrap');
 
gulp.task('ng-autobootstrap', function() {
    return gulp
        .src('js/**/*.js')
        .pipe(ngAutoBootstrap(options))
        .pipe(gulp.dest('js'));
});

Options

Options are passed to the ng-autobootstrap module behind the scenes. Check out the documentation on options there.

How it works

Consider an angular app with many controllers, directives, services, animations – like this one:

controllers/
    app-controller.js
    users-controller.js
    posts-controller.js
    login-controller.js
    signup-controller.js
    account-controller.js
directives/
    autosize.js
    blur-on.js
    doubleclick-to-edit.js
    parse-markdown.js
services/
    api-service.js
    auth-service.js
    user-service.js
    post-service.js
main.js

Pull in a single file to hook everything up

main.js

var app = angular.module('myApp', []);
require('./bootstrap.js')(app);

ng-autobootstrap automatically creates the bootstrap-file that include all these angular modules and hooks them up with your app. This could look like this:

bootstrap.js

'use strict';
 
module.exports = function(app) {
    // Controllers
    app.controller('AppController', require('./controllers/app-controller'));
    app.controller('UsersController', require('./controllers/users-controller'));
    app.controller('PostsController', require('./controllers/posts-controller'));
    app.controller('LoginController', require('./controllers/login-controller'));
    app.controller('SignupController', require('./controllers/signup-controller'));
    app.controller('AccountController', require('./controllers/account-controller'));
    // Directives
    app.directive('autosize', require('./directives/autosize'));
    app.directive('blurOn', require('./directives/blur-on'));
    app.directive('doubleclickToEdit', require('./directives/doubleclick-to-edit'));
    app.directive('parseMarkdown', require('./directives/parse-markdown'));
    // Services
    app.service('ApiService', require('./services/api-service'));
    app.service('AuthService', require('./services/auth-service'));
    app.service('UserService', require('./services/user-service'));
    app.service('PostService', require('./services/post-service'));
};

Fully Customizable

• Configure path and name for your bootstap file
• Configure any casing convention for your module names (camelCase, PascalCase, Title Case, snake_case, lowercase, UPPERCASE, CONSTANT_CASE and more)
• Configure prefixes and suffixes for your module names (AppCtrl, AppController, just App or anything you like)
• Organize your modules how you like

Use cases

Generating one bootstrap.js file per angular module

If you're splitting up your app into multiple modules, like angular.module('app.admin', []) and angular.module('app.user', []), your directory structure may look something like this:

app/
    admin/
        controllers/
        directives/
    user/
        controllers/
        services/

You can effortlessly create multiple bootstrap.js files (one for each module) using gulp:

var merge = require('merge-stream');
 
gulp.task('ng-autobootstrap', function() {
    var admin = gulp
        .src('app/admin/**/*.js')
        .pipe(ngAutobootstrap())
        .pipe(gulp.dest('app/admin'));
 
    var user = gulp
        .src('app/user/**/*.js')
        .pipe(ngAutobootstrap())
        .pipe(gulp.dest('app/user'));
 
    return merge(admin, user);
});

Then you will end up with multiple `bootstrap.js files like this:

app/
    admin/
        controllers/
        directives/
        bootstrap.js // pulls in admin-controllers and admin-directives
    user/
        controllers/
        services/
        bootstrap.js // pulls in user-controllers and user-services