如何浏览具有多个SPA的AngularJS项目

Question

我正在尝试在现有的AngularJS项目中实现Browserify,以便创建多个共享许多通用模块的SPA.

我面临的问题是如何提取模板文件列表,我可以将其输入到grunt-angular-templates中.

我为每个应用创建了"路线"文件.此应用程序包含所有应用程序状态的ui-router配置.这意味着每个模板的路径都包含在该文件中的值中:'templateUrl:path_to_template_file'.

如何提取每个路径并将它们提供给grunt-angular-templates？

提前致谢.

Answer 1

我的每个SPA都是"部分",所以我使用这个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

这是我的目录结构(到目前为止:))

 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