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

我有 2 个 html 文件索引.html 和构建.html。

构建.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 -->

索引.html

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

我需要注入构建的内容.html索引.html，构建后.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%".html我得到了"build.html"文件路径。任何解决此问题的见解都值得赞赏。

以下语句只会给您该结果，您在此处没有读取文件，而是将文本替换为路径名。您要做的是读取文件并将该结果返回到替换。

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

在假设下替换 = 要求('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'));
})

相关内容

最新更新

热门标签：