将html模板文件合并为一个JS文件

2022-01-12 00:00:00 javascript gulp underscore.js underscore.js-templating
  1. 我有 HTML 模板文件(下划线模板语法)
  2. 这些文件以 HTML 格式保存，因此易于编辑(IDE 语法突出显示)
  3. 我不想用 ajax 来获取它们，而是将它们全部组合起来，并将它们包含为 js 文件.
  4. 使用 GULP 作为我的任务运行器，我希望它以某种方式结合所有 将 HTML 转换成这样的内容，作为一个 javascript 文件，我可以将其包含在我的 BUILD 过程中:
  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 是 HTML 文件名.

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?

对于那些希望您的模板作为 ES6 模块的人，我创建了 gulp-file-contents-to-modules

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

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

我所有与使用 gulp 组合模板文件相关的 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

推荐答案

我发现这个很棒的工具可以满足我的需求:

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

https://www.npmjs.org/package/gulp-模板编译

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

然后您可以使用 window.JST 访问键/值对象.值是函数(我不知道为什么，但就是这样)

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)

我决定使用 gulp-file-contents-to-json 这是从文件内容生成 JSON 的最简单的方法.

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

我创建了 3 个 NPM 包(可能对某人很方便):

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

相关文章