Внедрить содержимое HTML в другой HTML, используя gulp

У меня есть 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.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'));
})

Теперь происходит то, что вместо // // inject: %HTML5:DYNAMIC:SRC:BUILD%"в index.html я получаю путь к файлу"build.html". Любое понимание, чтобы исправить эту проблему приветствуется.

Источник

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'));
})
Источник
Другие вопросы по тегам