在Angular项目中使用gulp处理html部分

时间:2014-12-06 14:36:28

标签: angularjs gulp

-client/
     index.html
     node_modules/
       ..
       ..
     js/
       -controllers/   
       -directives/
       -services/
         app.js
     partials/
         someHTML.html
         anotherHTML.html
     build/
        -app.js
        -custom.css
        ...

-server
   server.js

Angular指令,控制器等使用的所有部分html模板都驻留在build文件夹中。我使用gulp构建项目,它执行所有常见任务,例如清理目标文件夹,编译手写笔并将其放在构建文件夹中,将bootstrap.css移动到构建文件夹,浏览化.js文件和mvoe构建文件夹。到目前为止这么好......但是如何处理partials文件夹中的html模板呢?

这些只是被复制到构建文件夹吗?

根据@JimL建议..我正在使用browserify目前我的主app.js看起来像这样

/*jshint globalstrict: true*/
'use strict';

require('es5-shim');
require('es5-sham');
require('jquery');
require('angular');

var app = angular.module('app', [require('angular-ui-router')]);

require('./controllers');
require('./directives');
require('./services');

现在,模板缓存如何适合上述等式? template.js文件已创建并放置在build文件夹中..这不适用于browserify。

1 个答案:

答案 0 :(得分:5)

您应该尝试使用Gulp Angular Templatecache等工具,它将使用$ templateCache服务直接在您的应用程序中捆绑模板。

var templateCache = require('gulp-angular-templatecache');

gulp.task('html', function () {
    gulp.src('templates/**/*.html')
        .pipe(templateCache())
        .pipe(gulp.dest('public'));
});

https://www.npmjs.com/package/gulp-angular-templatecache