Используйте gulp, чтобы скопировать содержимое одного файла glob в строку другого файла glob

Question

Я работаю над процессом сборки веб-компонента, который берет содержимое файла HTML и помещает его в строку в моем файле javascript.

Я хочу получить содержимое /src/foo/bar.html и добавить их в /dist/foo/bar.js

На данный момент я использую gulp-tap а также fs читать в html, который работает, и я использую gulp-string-replace чтобы добавить строку в мой файл js следующим образом:

const gulp = require('gulp');
const fs = require('fs');
const replace = require('gulp-string-replace');
const tap = require('gulp-tap');

gulp.task('add-html', function () {
    // Use these variables for Gulp-string-replace
    const startHTML = "<!-- Start html -->";
    const endHTML = "<!-- End html -->";
    const regEx = new RegExp(
        startHTML + "[\\s\\S]*" + endHTML,
        "i"
    );
    let htmlInjection;
    return gulp.src(['dist/**/*.js'])
        .pipe(tap(function (file, t) {
            // get to html file
            const htmlFile =
                file.path
                    .replace(/\.js$/i, ".html")
                    .replace(/dist/, "src");

            // read html, clean it up and add it to htmlInjection
            fs.readFile(htmlFile, function (err, data) {
                if (!err && data) {
                    const cleanHTMLString =
                        data.toString()
                            .split('\n')
                            .join('')
                            .replace(/\s+/g, ' ')
                            .trim();
                    htmlInjection =
                        startHTML +
                        cleanHTMLString +
                        endHTML;
                }
            });
        }))
        .pipe(replace(regEx, htmlInjection)) // Replace <!-- Start html --> foo <!-- End html --> with <!-- Start html --> <bar></bar> <!-- End html -->
        .pipe(gulp.dest('dist'));
});

Это еще не работает, так как htmlInjection не определено, когда replaceбывает. Я считаю, что это связано с асинхронностью каналов.

Я ссылался на этот вопрос, передавая переменную между каналами в Gulp 3.9.1, и мне было интересно, является ли этот подход лучшим из возможных?

Есть ли более простые способы достичь того, что я пытаюсь здесь сделать?

Спасибо!

Answer 1

Я нашел решение, которое относительно хорошо снижает сложность.

Используя gulp-replace вместо gulp-string-replace, вы можете получить путь к файлу внутри своей функции замены следующим образом:

var replace = require('gulp-replace');
 
gulp.task('templates', function(){
  gulp.src(['file.txt'])
    .pipe(replace('filename', function() {
      // Replaces instances of "filename" with "file.txt"
      // this.file is also available for regex replace
      // See https://github.com/gulpjs/vinyl#instance-properties for details on available properties
      return this.file.relative;
    }))
    .pipe(gulp.dest('build/'));
}); 

Поэтому вместо двух трубок по одной gulp-tap и один для gulp-string-replace, У меня есть только один gulp-replaceтруба. Теперь мой код выглядит так:

const gulp = require('gulp');
const fs = require('fs');
const replace = require("gulp-replace");

gulp.task('compileHTML', function () {
    const startHTML = "<!-- Start html -->";
    const endHTML = "<!-- End html -->";
    //Creates the regEx this ways so I can pass the variables.
    const regEx = new RegExp(startHTML + "[\\s\\S]*" + endHTML,"i");
    return gulp.src('dist/**/*.js')
        .pipe(replace(regEx, function () {
            let htmlFile = this.file.path.replace(/\.js$/i, ".html").replace(/dist/, "src");

            const html = fs.readFileSync(htmlFile);
            const cleanHTMLString =
                // cleaning logic
            injectHTMLContent = startHTML + cleanHTMLString + endHTML;
            return injectHTMLContent;
        }))
        .pipe(gulp.dest('dist'));
});

Это не самая чистая реализация, но, надеюсь, это поможет другим в будущем.