使用 gulp 将 HTML 的内容注入另一个 html答案

【问题标题】：Inject content of an HTML to another html using gulp使用 gulp 将 HTML 的内容注入另一个 html
【发布时间】：2017-06-09 06:29:37
【问题描述】：

我有 2 个 html 文件 index.html 和 build.html。

build.html

    <!-- build:js({.tmp/serve,www,src,.tmp/partials}) scripts/vendor.js -->
<!-- bower:js -->
<!-- run `gulp wiredep` to automaticaly populate bower script dependencies -->
<!-- endbower -->

<script src="../bower_components/angulartics/src/angulartics.js"></script>
<script src="../bower_components/owl.carousel/dist/owl.carousel.js"></script>
<!-- endbuild -->

<!-- build:js({.tmp/serve,www,src,.tmp/partials}) scripts/app.js -->
<!-- inject:js -->
<!-- endinject -->
<!-- endbuild -->

<!-- compiled css output -->
<!-- <link href="css/ionic.app.css"
    rel="stylesheet"> -->
<!-- ionic/angularjs js -->
<!-- <script src="lib/ionic/js/ionic.bundle.js"></script> -->
<!-- config options -->
<!-- <script src="config/app-config.js"></script> -->
<!-- run `gulp wiredep` to automaticaly populate bower styles dependencies -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css({.tmp/serve,src}) styles/app.css -->
<!-- inject:css -->
<!-- css files will be automaticaly insert here -->
<!-- endinject -->
<!-- endbuild -->

index.html

<html>
<head>
</head>
<body>
 // inject: %HTML5:DYNAMIC:SRC:BUILD%
</body>
</html>

我需要将 build.html 的内容注入 index.html，在 build.html 有实际的 js 和 css 文件之后。下面我附上gulp任务。

gulp 文件

gulp.task('inject, function () {
  var injectStyles = gulp.src([
    paths.tmp + '/serve/**/*.css',
    '!' + paths.tmp + '/serve/module/vendor.css',
    '!' + paths.tmp + '/serve/app/vendor.css'
  ], {
    read: false
  });

  var injectScripts = gulp.src(gulp.sources.js)
    .pipe($.angularFilesort().on('error', $.util.log));

  var injectOptions = {
    ignorePath: [paths.src, paths.tmp + '/serve', paths.tmp + '/partials'],
    addRootSlash: false
  };

  var wiredepOptions = {
    directory: 'bower_components',
    // TODO: Revisit these excludes, delete this comment
    exclude: [/angulartics/, /sha1/]
  };

  return gulp.src('build.html')
    .pipe($.inject(injectStyles, injectOptions))
    .pipe($.inject(injectScripts, injectOptions))
    .pipe(wiredep(wiredepOptions))
    .pipe(injectfile({
      pattern: '//\\s*inject:<filename>|/*\\s*inject:<filename> '
    }))
    .pipe(gulp.dest(paths.tmp + '/serve'));
});

gulp.task('inject-build',['inject'], function () {
  return gulp.src(paths.src + '/index.html')
  .pipe(replace('%HTML5:DYNAMIC:SRC:BUILD%', paths.tmp + '/serve/build.html'))
  .pipe(gulp.dest(paths.tmp + '/serve'));
})

现在发生的事情是，代替 index.html 中的“//注入：%HTML5:DYNAMIC:SRC:BUILD%”，正在获取“build.html”文件路径。感谢任何解决此问题的见解。

【问题讨论】：

我认为，您必须使用gulp-template-cache 来缩小所有代码

标签： angularjs gulp gulp-inject gulp-replace

【解决方案1】：

下面的语句只会给你那个结果，你不是在这里读取文件，而是用路径名替换文本。您需要做的是读取文件并将结果返回给替换。

.pipe(replace('%HTML5:DYNAMIC:SRC:BUILD%', paths.tmp + '/serve/build.html'))

假设 replace = require('gulp-replace')

您必须将“fs”导入现有任务

var fs = require('fs');

gulp.task('inject-build',['inject'], function () {
  return gulp.src(paths.src + '/index.html')
  .pipe(replace('%HTML5:DYNAMIC:SRC:BUILD%', function(s) {
     var tmpl = fs.readFileSync(paths.tmp + '/serve/build.html', 'utf8');
     return tmpl;
 }))
  .pipe(gulp.dest(paths.tmp + '/serve'));
})

【讨论】：