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

Question

输入

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

输出

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

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

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>");
    });
});

现在您可以将模块（＆＃34; my.templates＆＃34;）注入您的指令并使用＆＃34; your_template_dir / template.tpl.html＆＃34;作为你的templateUrl。