Repository files navigation

Gulp plugin to order AngularJS source files by directory and type.

See below for how it works.

npm install gulp-angular-order

vargulp=require("gulp");varconcat=require('gulp-concat');varangularOrder=require('gulp-angular-order');gulp.task('build',function(){returngulp.src('src/**/*.js').pipe(angularOrder()).pipe(concat('bundle.js')).pipe(gulp.dest('dist'));});

Below is a list of optional options:

• base: The relative path to the root of the application. The default is the current directory. An file not under the base path will not be sorted.

• types: An array of types, in descending order. The default order is['service', 'controller', 'directive', 'filter', 'routes', 'config', 'module'].

• special: An array of top-level directory names that will always be sorted to the top of resulting file list.

The plugin also exports thesortFiles function, to allow sorting files using the Angular Order when not working with Gulp. The function expects an array of files with apath property, and can optionally be passed the options above.

The plugin has two expectations, based on the recommendedStyle Guide:

1. Each folder in the application contains an AngularJS module, defined in its own file
2. Each file contains one of the AngularJS types, which is included in the file name

Example app structure:

app/app.module.jsapp.config.jspeople/attendees.htmlattendees.controller.jspeople.routes.jspeople.module.jsspeakers.htmlspeakers.controller.jsspeaker-detail.htmlspeaker-detail.controller.jssessions/sessions.htmlsessions.controller.jssessions.routes.jssessions.service.jssession-detail.htmlsession-detail.controller.jssessions.module.js

The plugin will then order the folders based on folder depth, so that child folders are sorted before parent folders.The reason is that child modules export a module reference that the parent folder can then use to declare its dependencies.

// people/speakers.controller.jsvarapp=app||{};varpeople=app.people||(app.people={});(function(){functionSpeakersController(){        ...}SpeakersController.prototype...people.SpeakersController=SpeakersController;})// people/people.module.js:varapp=app||{};varpeople=app.people||(app.people={});(function(){varmodule=angular.module('app.people',[]).config(peopleRoutes).controller('speakers',[            ...,app.people.SpeakersController// SpeakersController must already be loaded])...people.module=module;}());// app.module.jsvarapp=app||{};(function(){// Internal application moduleangular.module('app',[app.people.module.name// This must already be loaded]);// External application module (ex. in ng-app directive)angular.module('SampleApp',['app']);});

Once the folders have been sorted, the files within each folder are sorted based on their type. By default the order will be Services, Controllers, Directives, Filters, and then Modules. The plugin will try to leave files whose file name doesn't include a type or whose type does not appear in thetypes array in their original position.

In the example application above, the sorted output will be as follows:

app/people/attendees.controller.jsapp/people/speakers.controller.jsapp/people/people.routes.jsapp/people/speaker-detail.controller.jsapp/people/people.module.jsapp/sessions/sessions.service.jsapp/sessions/sessions.controller.jsapp/sessions/sessions.routes.jsapp/sessions/session-detail.controller.jsapp/sessions/sessions.module.jsapp/app.config.jsapp/app.module.js

To customize the order of files, you can specify your owntypes array in the options.

1. If you use TypeScript withnamespaces, it will generate the boilerplate code to contain your code. All you need to do is declare exports in the namespace.

2. If you use ES6/ES2015 Module syntax, this all becomes less of any issue, but will require you to use a Module loader or bundler (Webpack, Browserify, SystemJS, etc.)