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

How to convert html into javascript string using gulp task?

本文关键字:转换 javascript 字符串 html 何使用 gump 任务      更新时间:2023-09-26

输入

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

输出

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

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

@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"作为模板URL。