如何使用 gulp-inject 在我的 index.html 中插入文件的内容？答案

【问题标题】：How can I insert the contents of a file in my index.html with gulp-inject?如何使用 gulp-inject 在我的 index.html 中插入文件的内容？
【发布时间】：2016-08-31 19:59:45
【问题描述】：

这是我迄今为止尝试过的：

gulp.task('watch-index-html', function () {
    gulp.watch(files, function (file) {
        return gulp.src('index/index.html')
            .pipe(inject(gulp.src(['index/base3.html']), {
                starttag: '<!-- inject:base3:html -->'
            }))
            .pipe(print(function (file) {
                return "Processing " + file;
             }))
            .pipe(gulp.dest('./'));
    });
});

事情是这样的：

之前：

<body>
    abcd
    <!-- inject:base3:html -->
    <!-- endinject -->
    efgh

之后：

<body>
    abcd
<!-- inject:base3:html -->
<link rel="import" href="/index/base3.html">
<!-- endinject -->
    efgh

我希望看到的是文件的实际内容，而不是行：

<link rel="import" href="/index/base3.html">

谁能告诉我是否可以使用gulp-inject 来“插入文件的内容”，或者是否还有其他我应该使用的东西。请注意，过去我尝试使用gulp-mustache，但在插入字符时遇到了问题（65279）。我认为这与以下问题有关，但我从来没有让小胡子为我工作：

How to avoid echoing character 65279 in php? (This question also relates to Javascript xmlhttp.responseText (ajax))

我希望有人可以通过gulp-inject 或gulp-mustache 或任何其他将文件内容插入另一个文件的方式给我一些建议。

【问题讨论】：

标签： javascript node.js gulp gulp-inject

【解决方案1】：

使用custom transform function 注入文件内容：

gulp.task('watch-index-html', function () {
  gulp.watch(files, function (file) {
    return gulp.src('index/index.html')
      .pipe(inject(gulp.src(['index/base3.html']), {
         starttag: '<!-- inject:base3:html -->',
         transform: function(filepath, file) {
           return file.contents.toString();
         }
      }))
      .pipe(print(function (file) {
        return "Processing " + file;
      }))
     .pipe(gulp.dest('./'));
  });
});

【讨论】：