Gulp插件之gulp-angular-templatecache

gulp

目录:

gulp-angular-templatecache

项目地址:gulp-angular-templatecache

在$templateCache中连接并注册AngularJS模板。

安装

• npm npm i -D gulp-angular-templatecache
• yarn yarn add -D gulp-angular-templatecache

例子

gulpfile.js

连接目录所有的.html模板保存到 public/templates.js(默认的文件名字)

var templateCache = require('gulp-angular-templatecache');
gulp.task('default', function() {
  return gulp.src('templates/**/*.html')
    .pipe(templateCache())
    .pipe(gulp.dest('public'))
})

结果(public/templates.js)

angular.module('templates').run([$templateCache, 
  function($templateCache) {
    $templateCache.put('template1.html',
      // template1.html content (escaped)
    );
    $templateCache.put('template2.html',
      // template2.html content (escaped)
    );
    // etc.
  };
])

API

gulp-angular-templatecache(filename, options)

filename - {string} [filename='templates.js']

名字在连接时使用

options

root - {string}

模板的url前缀

module - {string} [module='templates']

angular模块的名字

standalone - {boolean} [standalone=false]

创建一个新的AngularJS模块,而不是使用现有的。

base {string | function} [base=file.base]

覆盖文件基本路径

moduleSystem {string}

包装templateCache模块系统，目前支持系统:RequireJS、Browserify ES6和IIFE

transformUrl {function}

在放入$templateCache之前转换生成的URL

transformUrl: function(url) {
  return url.replace(/\.tpl\.html$/, '.html')
}

templateHeader {string} [templateHeader=see below]

覆盖模板头部
var TEMPLATE_HEADER = 'angular.module("<%= module %>"<%= standalone %>).run(["$templateCache", function($templateCache) {';

templateHeader {string} [templateHeader=see below]

覆盖模板主要部分
var TEMPLATE_BODY = '$templateCache.put("<%= url %>","<%= contents %>");';

templateFooter {string} [templateFooter=see below]

覆盖模板页脚
var TEMPLATE_FOOTER = '}])';