0

我正在开发一个 Web 组件构建过程，该过程获取 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 中的管道之间传递一个变量，并且想知道这种方法是否是最好的方法？

有没有更简单的方法来实现我在这里尝试的目标？

谢谢！

4

1 回答 1

0

我找到了一个相对较好地降低复杂性的解决方案。

通过使用gulp-replace而不是gulp-string-replace，您可以在 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/'));
});

所以我没有两个管道，一个 forgulp-tap和一个 for 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'));
});

这不是最干净的实现，但希望这将在未来对其他人有所帮助。

于 2020-07-01T09:24:24.917 回答