Angularjs 使用gulp将一个HTML的内容注入另一个HTML_Angularjs_Gulp_Gulp Inject_Gulp Replace

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

angularjs gulp

Angularjs 使用gulp将一个HTML的内容注入另一个HTML,angularjs,gulp,gulp-inject,gulp-replace,Angularjs,Gulp,Gulp Inject,Gulp Replace,我有两个html文件index.html和build.html build.html    <!-- endbower

我有两个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>


//注入：%HTML5:DYNAMIC:SRC:BUILD%

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

咽锉

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'));
})

gulp.task（'inject，function（）{
var=gulp.src([
paths.tmp+'/serve/***.css'，
“！”+paths.tmp+/service/module/vendor.css”，
“！”+path.tmp+”/service/app/vendor.css”
], {
读：错
});
var injectScripts=gulp.src（gulp.sources.js）
.pipe（$.angularFilesort（）.on（'error'，$.util.log））；
变量注入选项={
ignorePath:[paths.src，paths.tmp+'/service'，paths.tmp+'/partials']，
addRootSlash:false
};
var wiredepOptions={
目录：'bower_components'，
//TODO:重新访问这些排除项，删除此注释
排除：[/angulartics/，/sha1/]
};
返回gulp.src（'build.html'）
.pipe（$.inject（injectStyles，injectOptions））
.pipe（$.inject（injectScripts，injectOptions））
.管道（线切割（线切割选项））
.pipe（注入文件）({
模式：'/\\s*注入：|/*\\s*注入：'
}))
.管道（吞咽目的地（路径tmp+/serve”）；
});
gulp.task（'inject-build'，['inject']，function（））{
返回gulp.src（path.src+'/index.html'）
.pipe（替换（“%HTML5:DYNAMIC:SRC:BUILD%”，path.tmp+'/service/BUILD.html'））
.管道（吞咽目的地（路径tmp+/serve”）；
})

现在发生的是，我得到的是“BUILD.html”文件路径，而不是index.html中的“//inject:%HTML5:DYNAMIC:SRC:BUILD%”。任何解决此问题的见解都将受到赞赏

下面的语句将只给出该结果，您不是在读取文件，而是在用路径名替换文本。您需要做的是读取文件并将结果返回给replace

.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'));
})

我认为，您必须使用

gulptemplate cache

来缩小所有代码