Создать файл ресурсов JavaScript из локальных файлов

Question

Я использую gulp и пытаюсь создать задачу gulp, которая объединяет файлы в файл javascript.

Например, изображение у меня есть:

Файл template\template1.html:

<h2>some html content</h2>
<p>blah blah blah</p>

Файл template\template2.html:

<h2>some other html content</h2>
<img src='cat.png'>

Я хотел бы прочитать и объединить эти файлы в один файл JavaScript, например:

const templates = {
    "template1" : "<h2>some html content</h2>\n<p>blah blah blah</p>",
    "template2" : "<h2>some other html content</h2>\n<img src='cat.png'>"
}

export default templates

Тем не менее, я терплю неудачу, когда имею дело с глотанием сантехники (я совершенно новичок в глотке, я признаю).

Как достичь своей цели?

Прямо сейчас я попытался поиграть с gulp-trough, но при запуске не получилось:

const gulp = require('gulp');
const through = require('gulp-through');

gulp.task('templates', function () {
    var result = {}
    gulp.src('src/templates/**/*.html')
        .pipe(through('readFile', function(){
            console.log(arguments); // not reached!

        }, defaults));
})

gulp.task('default', ['templates'])

Answer 1

Нетрудно написать собственный плагин с использованием модуля through2 (как описано в официальных документах .)

// gulpfile.js

const gulp = require('gulp');
const path = require('path');

const through = require('through2'); // npm install --save-dev through2

const toTemplateModule = obj => {
  return [
    `const template = ${JSON.stringify(obj, null, 2)};`,
    '',
    'export default template;'
  ].join('\n');
};

const mergeTemplate = file => {
  const results = {};
  let latestFile;

  return through.obj(
    function(file, encoding, callback) {
      latestFile = file;
      results[path.basename(file.path)] = file.contents.toString(encoding);
      callback(null, file);
    },
    function(callback) {
      const joinedFile = latestFile.clone({
        contents: false
      });
      joinedFile.path = path.join(latestFile.base, file);
      joinedFile.contents = Buffer.from(toTemplateModule(results), 'utf-8');
      this.push(joinedFile);
      callback();
    });
};

gulp.task('templates', () => {
  return gulp
    .src('./src/templates/**/*.html')
    .pipe(mergeTemplate('templates.js'))
    .pipe(gulp.dest('./build'))
});

gulp.task('default', ['templates'])