pamplo / gulp-angular-modules

Detects when you are adding a new Angular.js module into your working directory to automatically load the file and include the module into your project.

gulp-angular-modules

This module helps you to detect when you are adding a new Angular.js module into your working directory to automatically load the file and include the module into your project.

Inspiration

I love using gulp-inject. It's a great tool that can take care of including your JavaScript and bower files into your index.html file.

When working with Angular.js, I also wanted to include all my modules names as a dependency of my app.js file automatically. I always forget to add them! So I created gulp-angular-modules to never have do that this by hand again.

You can also watch files & when they change it can reload the browser for you in combination with gulp-watch and BrowserSync.

How it works?

It creates a main module into a file that requires all your modules as a dependency. All you need to do is to include that file into your index.html and the module name into your Angular.js depedencies.

Supports

• Adding a new module
• Renaming a module
• Removing a module
• 3rd party modules

How to install

npm install gulp-angular-modules --save-dev

Usage

1. This is the only dependency you'll need into your Angular.js project: gulp-angular-modules

// app/src/main.js

angular.module('app', ['gulp-angular-modules']);

2. Create a task to run:

// gulpfile.js

var gulp = require("gulp");
var angularModules = require("gulp-angular-modules");

gulp.task("default", function() {

    var options = {
        name: "gulp-angular-modules", // The name of the module to use in your main Angular.js
        modules: ['ui.router'] // Any extra modules that you want to include.
    };

    return gulp.src(["!app/src/templates/*", "app/src/**/*.js"])
        .pipe(angularModules("gulp-angular-modules.js", options)) // Name of the file generated
        .pipe(gulp.dest("app/src/init/")) // Destination folder
});

3. Make sure that the module path it's added to your index.html

<script src="app/src/init/gulp-angular-modules.js">

API

angularModules(fileName, options)

fileName

Type: string

The destination fileName.

options

name

Type: string

The name of the module that you want to use.

modules

Type: array

List of additional modules to include.

Example

Check out the example directory: gulpfile.js, index.html

This is how the generated gulp-angular-modules.js will look like after the angularModules runs

(function (ng) {
'use strict';
ng.module('gulp-angular-modules', ['module.name','another.module','ui.router']);
})(angular);

Let me know if you find any issues!

Thank you!