CODEWITHSUNDEEP
angularjsgulpgulp-injectgulp-replace
Aravind
Aravind

Reputation: 2320

Inject content of an HTML to another html using gulp

I have 2 html files index.html and 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>

I need to inject the content of build.html to index.html, after the build.html has the actual js and css files. Below I am attaching the gulp task.

gulp file

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

Now what is happening is, in place of "// inject: %HTML5:DYNAMIC:SRC:BUILD%" in index.html am getting the "build.html" file path. Any insight to fix this issue is appreciated.

Upvotes: 2

Views: 1115

Answers (1)

karthick
karthick

Reputation: 12176

The following statement will give you only that result, you are not reading the file here you are replacing the text with the path name. What you have to do is read the file and return that result to the replace.

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

Under the assumption replace = require('gulp-replace')

You have to import 'fs' to your existing task

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

Upvotes: 1

Related Questions