Javascript 如何浏览包含多个SPA的AngularJS项目

我试图在现有的AngularJS项目中实现Browserify，以便创建多个共享多个公共模块的SPA

我面临的问题是如何提取模板文件列表，然后将其输入grunt angular模板

我已经为每个应用程序创建了一个“路由”文件。此应用程序包含应用程序所有状态的ui路由器配置。这意味着每个模板的路径都包含在该文件中的一个值中：“templateUrl:path\u to_template\u file”

如何提取这些路径并将它们提供给grunt angular模板

提前感谢。

我的每个水疗中心都是一个“区域”，因此我使用此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));

});

更新：

@kpg

这是我的目录结构（到目前为止：）

---

伟大的你能给我一个文件夹结构的概要吗？你能解释一下在你的gulpfile中使用水管工的理由吗？@malix:：如果你能分享一个示例项目（如果你有一个使用这个gulpfile的项目的话）（我正试着开始使用browserify+angular+node）这可能是常见的行话，但我认为在标题中使用单页应用程序，而不是首字母缩写，可以为每个人节省一些大脑周期…：）

 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