How to browserify an AngularJS project with multiple SPAs

Question

I'm trying to implement Browserify in an existing AngularJS project, in order to create multiple SPAs that share a number of common modules.

The issue I am facing is how to extract a list of template files which I can feed into grunt-angular-templates.

I have created a 'routes' file for each app. This app contains the ui-router configuration for all of the app's states. That means that the path for each template is contained in a value within that file: 'templateUrl: path_to_template_file'.

How can I extract each of those paths and feed them to grunt-angular-templates?

Thanks in advance.

Answer 1

Each of my SPA is a "section", so I use this gulpfile:

'use strict';

var gulp = require('gulp');
var gutil      = require('gulp-util');
var lr = require('tiny-lr');
var server = lr();
var browserify = require('gulp-browserify');
var spawn = require('child_process').spawn;
var rename     = require('gulp-rename');
var plumber = require('gulp-plumber');
var refresh = require('gulp-livereload');
var uglify = require('gulp-uglify');
var templates = require('gulp-angular-templatecache');
var minifyHTML = require('gulp-minify-html');
var gulpif = require('gulp-if');

var sections = ['anonymous','admin','pro','ind'];
sections.forEach(function(section){
  gulp.task(section, function(cb) {

    var isBuild = gutil.env.build;

    //single entry point to browserify
    return gulp.src(['./client/' + section + '/' + section + '.js'])
      .pipe(plumber(true))
      .pipe(browserify({
        insertGlobals: true,
        debug: true
      }).on('error', function(){
          gutil.log(gutil.colors.red('**************** ERROR ****************'), arguments);
          //cb();
        }))
      .pipe(gulpif(isBuild, uglify()))
      .pipe(rename(section + '.js'))
      .pipe(gulp.dest('./www/js'))
      ;
  });
});


gulp.task('lr-server', function() {
  server.listen(35729, function(err) {
    if (err) {
      gutil.log(gutil.colors.red('ERROR'), err);
      return;
    }
  });
});


gulp.task('templates', function() {
  var isBuild = gutil.env.build;

  gulp.src(["www/partials/**/*.html"])
    .pipe(minifyHTML({
      quotes: true
    }))
    .pipe(templates('templates.js',{
      module: 'app',
      root: 'partials'
    }))
    .pipe(gulpif(isBuild, uglify()))
    .pipe(gulp.dest('./www/js'))
});


gulp.task('html', function() {
  gulp.src(["www/*.html"])
    .pipe(refresh(server));
});


gulp.task('nodemon', function(cb) {
  spawn('./node_modules/.bin/nodemon', ['--watch', 'server', 'server/server.js', '--ext','js,coffee'], {
    stdio: 'inherit'
  })
    .on('close', function() {
      cb();
    });
});

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

  gutil.log(gutil.colors.green('Default'), gutil.env);

  gulp.run.apply(gulp, ['templates', 'lr-server', 'nodemon'].concat(sections));

  gulp.watch('client/common/**/*.js', function(evt) {
    gutil.log(gutil.colors.cyan('common'), 'changed');
    gulp.run.apply(gulp, sections);
  });

  sections.forEach(function(section){
    gulp.watch('client/' +
      section +
      '/**/*.js', function(evt) {
      gutil.log(gutil.colors.cyan(section), 'changed');
      gulp.run(section);
    });
  });

  gulp.watch('www/css/**/*.css', function(evt) {
    gutil.log(gutil.colors.cyan('css'), 'changed');
    server.changed({
      body: {
        files: [evt.path]
      }
    });
  });

  gulp.watch('www/js/*.js', function(evt) {
    gutil.log(gutil.colors.cyan('js'), 'changed', gutil.colors.gray(evt.path));
    server.changed({
      body: {
        files: [evt.path]
      }
    });
  });

  gulp.watch('www/**/*.html', function(evt) {
    gulp.run('templates');
  });

  gulp.watch('www/**/*.html', function(evt) {
    gulp.run('html');
  });

});

gulp.task('build', function() {

  gutil.env.build = true;

  gutil.log(gutil.colors.green('Build'), gutil.env);

  gulp.run.apply(gulp, ['templates'].concat(sections));

});

UPDATE:

@kpg

This is my directory structure (so far :) )

 ROOT
 ├── gulpfile.js
 ├── package.json
 ├─┬ client
 │ ├─┬ admin
 │ │ ├── index.js
 │ │ ├─┬ controllers
 │ │ │ └── AdminController
 │ │ ├─┬ services
 │ │ │ └── SomeService.js
 │ │ └─┬ directives
 │ │   └── SomeDirective.js
 │ ├─┬ anonymous
 │ │ ├── index.js
 │ │ ├─┬ controllers
 │ │ │ └── AnonymousController
 │ │ ├─┬ services
 │ │ │ └── SomeService.js
 │ │ └─┬ directives
 │ │   └── SomeDirective.js
 │ ├─┬ common
 │ │ ├── config.js
 │ │ ├── index.js
 │ │ ├─┬ controllers
 │ │ │ └── SearchController
 │ │ ├─┬ filters
 │ │ │ └── SomeFilter.js
 │ │ ├─┬ services
 │ │ │ └── SomeService.js
 │ │ └─┬ directives
 │ │   └── SomeDirective.js
 │ └─┬ fooRole
 │   ├── index.js
 │   ├─┬ controllers
 │   │ └── FooRoleController
 │   ├─┬ services
 │   │ └── SomeService.js
 │   └─┬ directives
 │     └── SomeDirective.js
 ├─┬ server
 │ ├── server.js
 │ ├── api
 │ ├── config
 │ ├── admin
 │ ├── controllers
 │ ├── helpers
 │ ├── models
 │ ├── routes
 │ └── service
 └─┬ www
   ├── css
   ├── js
   ├── partials
   └── vendor