如何使用 gulp 任务将 html 转换为 javascript 字符串？

Question

输入

<div id="main">
   <div>
   Sample Html
   </div>
</div> 

输出

  var myvar = '<div id="main">'+
    '   <div>'+
    '   Sample Html'+
    '   </div>'+
    '</div>';

我想转换html模板并将输出添加到模板部分的角度指令中。

Answer 1

正如@dfsq 建议您需要html2js 插件：

var gulp = require('gulp');
var html2js = require('gulp-html2js');
gulp.task("createTemplates", function(){
    //create js templates for templatecache
    return gulp.src([baseDirectory + "/your_template_dir/*.tpl.html"])
        .pipe(html2js("directive.templates.js", {
            base: baseDirectory,
            name: "my.templates" //module name for injector
        })).pipe(gulp.dest("your_output_directory"));
});

创建：

(function(module) {
    try { app = angular.module("my.templates"); }
    catch(err) { app = angular.module("my.templates", []); }
    app.run(["$templateCache", function($templateCache) {
        "use strict";

        $templateCache.put("your_template_dir/template.tpl.html","<p>Template content</p>");
    });
});

现在您可以将模块（“my.templates”）注入您的指令并使用“your_template_dir/template.tpl.html”作为您的模板网址。