我一直在寻找关于这个问题的指导和建议，并考虑了许多不同的选择。我想分享一下我目前所采用的方法。
请注意： 这种方法正在使用的项目仍处于早期阶段，因此所描述的方法绝不是铁板钉钉的。如果将来需要，我不会感到惊讶如果我必须进行调整/更改。
背景环境相同，我们有多个独立的指令存在于GitHub上，通过bower使用。每个组件的模板必须与指令内联，因为templateUrl路径无法工作。
本质上，我正在执行上面第2种选项，使用gulp，并利用gulp-angular-templatecache插件使用angular模板缓存。
解决方案
gulpfile.js
做两件事情，解析组件名称并将模板内容写入模板缓存（通过gulp插件），将组件代码和标记连接成单个文件（到dist/<component-name>.js中）。
var gulp = require('gulp'),
templates = require('gulp-angular-templatecache'),
concat = require('gulp-concat'),
clean = require('gulp-clean'),
pkg = require('./package.json');
var template = 'myTemplate.tpl.html'
gulp.task('templates', function () {
return gulp.src(template)
.pipe(templates('templates.tmp', {
root: '/templates/',
module: pkg.name
}))
.pipe(gulp.dest('.'));
});
gulp.task('concat', ['templates'], function () {
return gulp.src([pkg.main, 'templates.tmp'])
.pipe(concat(pkg.name + '.js'))
.pipe(gulp.dest('./dist/'));
});
gulp.task('clean', ['concat'], function () {
gulp.src('./*.tmp', {read: false})
.pipe(clean());
});
gulp.task('watch', function () {
gulp.watch(['*.js', '*.html'], ['build']);
});
gulp.task('build', ['templates', 'concat', 'clean']);
gulp.task('default', ['build', 'watch']);
输出
模板被设置在模板缓存中，指令通过 $templateCache.get(key) 获取它并将其设置为 template 属性。这样就可以通过 bower 使用此组件所需的单个文件输出，同时允许您将标记保留在源文件中的分离文件中。
angular.module('myModule', []).directive('myDirective', function ($templateCache) {
return {
template: $templateCache.get('/template/myTemplate.tpl.html');
link: function (scope, elm, attr) {
}
};
});
angular.module("myModule").run(["$templateCache", function($templateCache) {$templateCache.put("/template/myTemplate.tpl.html","<div>This is the template for your component</div>");}]);
思考
在组件开发过程中，有一个额外的构建步骤开销。鉴于要求，我认为没有完全避免这样的步骤的方法。如果不是在组件构建时完成，则必须在实现时完成。在这两个选项中，我认为在组件中进行构建更好，因为范围更窄、更清晰。
我并不确定我的 gulp 任务完全优化了。有一定数量的同步性，与 "gulp 方式" 相违背。可能需要一些时间/精力来改进它。
