将html模板文件组合成一个JS文件 [英] combine html template files into one JS file

问题描述

1. 我有HTML模板文件（下划线模板语法）
   
2. 这些文件以HTML格式保存，因此它们易于编辑（IDE语法突出显示）


3. 我不想用ajax获取它们，而是将它们全部结合起来，并将它们包含为 js 文件。
li>

4. 使用GULP作为我的任务运行者，我希望以某种方式将所有 HTML组合到这样的东西，作为一个javascript文件，我可以在我的BUILD过程中包含： em> template_file_name 是HTML文件名。
   
   

     var templates = {
    template_file_name：'... template HTML string ...'，
    template_file_name2：'... template HTML string ...'，
    template_file_name3：'...模板HTML字符串...'
   } 
     

   我不知道如何处理这个，以及如何从al创建这样的文本l文件..我可以将每个单独的文件转换为一个字符串，但我怎样才能把它放入一个对象？

   
   
   

   ---

   
   
   < h1>更新 - 15年10月25日 - ES6模块：
   
   

   对于那些希望将模板作为ES6模块的用户，我已经创建了 gulp-file-contents-to-modules
   
   

   演示输出：

   
   
   

     export var file_name =这是吧。 
    export var file_name2 =This is foo.\r\\\
   ; 
    export var my-folder__file_name =这是baz.\r\\\
   ; 
     

   
   
   

   ---

   
   
   

   我的所有NPM软件包都与使用模板文件gulp：

   
   
   
   
   
   1. https://www.npmjs.com/package/gulp-file-contents-to-keys
   
   
   2. https://www.npmjs.com/package/gulp-file-contents-to-modules
   
   
   3. https：//www.npmjs .com / package / gulp-template-compile-es6
   
   

   
   

   解决方案

   I我发现这个奇妙的工具正是我想要的： template-compilerel =nofollow> https://www.npmjs.org/package/gulp-template-compile

   
   
   

   ：

   
   
   

     gulp.task（'te mplates'，function（）{
    gulp.src（'./ views / templates / ** / *。html'）
    .pipe（template（））//将html转换为JS 
   .pipe（concat（'templates.js'））
    .pipe（gulp.dest（'./ js / dist /'））
   }）; 
     

   然后你可以通过 window.JST 。这些值是函数（我不知道为什么，但它就是这样）

   
   
   

   更新 - 2015年8月21日

   
   
   

   我决定使用 gulp-file-contents-to -json ，这是从文件内容中生成JSON最简单的可能。

   
   
   

   更新 - 2016年7月19日

   
   
   

   我创建了3个NPM包（可能对某人很方便）：
   
   

   
   
   1. https://www.npmjs.com/package/gulp-file-contents-to-keys
   
   
   2. https：// www.npmjs.com/package/gulp-file-contents-to-modules
   
   
   3. https://www.npmjs.com/package/gulp-template-compile-es6
   
   

   
   

   1. I have HTML template files (underscore template syntax)
   2. These files are saved in HTML format so they would be easy to edit (IDE syntax highlight)
   3. I don't want to fetch them with ajax, but rather combine them all and include them as ajs file.
   4. Using GULP as my task-runner, I would like it to somehow combine all the HTML to something like this, as a javascript file that I could include in my BUILD process:

   template_file_name is the HTML file name.

   var templates = {
      template_file_name : '...template HTML string...',
      template_file_name2 : '...template HTML string...',
      template_file_name3 : '...template HTML string...'
   }
   

   I don't really know how to approach this, and how to create such text from all the files..yes I can convert each individual file to a string, but how can I put it inside an object?

   ---

   Update - Oct 25, 15 - ES6 modules:

   For those who want your templates as ES6 modules, I have created gulp-file-contents-to-modules

   Demo output:

   export var file_name = "This is bar.";
   export var file_name2 = "This is foo.\r\n";
   export var my-folder__file_name = "This is baz.\r\n";
   

   ---

   All my NPM packages related to combining template files using gulp:

   1. https://www.npmjs.com/package/gulp-file-contents-to-keys
   2. https://www.npmjs.com/package/gulp-file-contents-to-modules
   3. https://www.npmjs.com/package/gulp-template-compile-es6

   解决方案

   I've found this wonderful tool which does exactly what I want:

   https://www.npmjs.org/package/gulp-template-compile

   Usage (as simple as):

   gulp.task('templates', function () {
       gulp.src('./views/templates/**/*.html')
           .pipe(template()) // converts html to JS
           .pipe(concat('templates.js'))
           .pipe(gulp.dest('./js/dist/'))
   });
   

   Then you can access the key/value object with window.JST. The values are functions (I don't know why, but it's like that)

   Update - August 21, 2015

   I've decided to use use gulp-file-contents-to-json which is the most simple thing possible for generating JSON from files' contents.

   Update - July 19, 2016

   I've created 3 NPM packages (might be handy to someone):

   1. https://www.npmjs.com/package/gulp-file-contents-to-keys
   2. https://www.npmjs.com/package/gulp-file-contents-to-modules
   3. https://www.npmjs.com/package/gulp-template-compile-es6

   这篇关于将html模板文件组合成一个JS文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！