Possible to dynamically inject files depends on the name of file to be injected ? #80

liuwenchao · 2015-01-12T08:20:59Z

I have a huge HTML file, with many files to inject, but it seems not DRY to do this:

var myTransform =  function (filepath, file) {
  return file.contents.toString('utf8');
};
gulp.src('target.html')
  .pipe(inject(gulp.src('file1.html'),  { starttag: '<!-- inject:file1:html} -->'), transform: myTransform))
  .pipe(inject(gulp.src('file2.html'),  { starttag: '<!-- inject:file2:html} -->'), transform: myTransform))
  .pipe(inject(gulp.src('file3.html'),  { starttag: '<!-- inject:file3:html} -->'), transform: myTransform))
  .pipe(inject(gulp.src('file4.html'),  { starttag: '<!-- inject:file4:html} -->'), transform: myTransform))
  .pipe(inject(gulp.src('file5.html'),  { starttag: '<!-- inject:file5:html} -->'), transform: myTransform))
  .pipe(inject(gulp.src('file6.html'),  { starttag: '<!-- inject:file6:html} -->'), transform: myTransform))
  .pipe(inject(gulp.src('file7.html'),  { starttag: '<!-- inject:file7:html} -->'), transform: myTransform))
  .pipe(inject(gulp.src('file8.html'),  { starttag: '<!-- inject:file8:html} -->'), transform: myTransform))
  .pipe(inject(gulp.src('file9.html'),  { starttag: '<!-- inject:file9:html} -->'), transform: myTransform))
;

Any way to eliminate the duplication? Thanks!

liuwenchao · 2015-01-21T11:09:24Z

@joakimbeng what do you think?

joakimbeng · 2015-01-25T10:07:54Z

@liuwenchao why don't you just do this:

var myTransform =  function (filepath, file) {
  return file.contents.toString('utf8');
};
gulp.src('target.html')
  .pipe(inject(gulp.src('file*.html'),  { starttag: '<!--inject:html} -->'), transform: myTransform))
;

But please provide an example of how your target.html looks like, it's easier to give a correct solution for your problem then.

N.B. If you're trying to inject all the files in different places (one file per tag) in the target file I think gulp-inject is the wrong tool for the job you should use a template engine for that instead.

liuwenchao · 2015-01-25T12:27:38Z

@joakimbeng yes they're injected in different places. The target.html looks like this:

<html>
<head>
    <!-- inject:empty:html -->
    <script src="/bower_components/webcomponentsjs/webcomponents.min.js"></script>
    <link rel="import" href="/bower_components/aha-partial/src/aha-partial.html">
    <!-- endinject -->
</head>
<body>

    <!-- inject:header:html -->
    <aha-partial src="partials/header.html"></aha-partial>
    <!-- endinject -->

    <div class="container">
        <ul class="nav nav-tabs">
            <li class="active">
                <a href="#tab1" data-toggle="tab">Tab 1</a>
            </li>
            <li>
                <a href="#tab2" data-toggle="tab">Tab 2</a>
            </li>
            <li>
                <a href="#tab3" data-toggle="tab">Tab 3</a>
            </li>
            <li>
                <a href="#tab4" data-toggle="tab">Tab 4</a>
            </li>
            <li>
                <a href="#tab5" data-toggle="tab">Tab 5</a>
            </li>
        </ul>

        <div class="tab-content">
            <div class="tab-pane" id="tab1">
                <!-- inject:tab1:html -->
                <aha-partial src="partials/tab1.html"></aha-partial>
                <!-- endinject -->
            </div>
            <div class="tab-pane" id="tab2">
                <!-- inject:tab2:html -->
                <aha-partial src="partials/tab2.html"></aha-partial>
                <!-- endinject -->
            </div>
            <div class="tab-pane" id="tab3">
                <!-- inject:tab3:html -->
                <aha-partial src="partials/tab3.html"></aha-partial>
                <!-- endinject -->
            </div>
            <div class="tab-pane" id="tab4">
                <!-- inject:tab4:html -->
                <aha-partial src="partials/tab4.html"></aha-partial>
                <!-- endinject -->
            </div>
            <div class="tab-pane" id="tab5">
                <!-- inject:tab5:html -->
                <aha-partial src="partials/tab5.html"></aha-partial>
                <!-- endinject -->
            </div>
        </div>
    </div>

    <!-- inject:footer:html -->
    <aha-partial src="partials/footer.html"></aha-partial>
    <!-- endinject -->
</body>
</html>

The real file is more complicated than this, this is a simplified version.

I'm using a custom element in development environment, it's kind of a template engine, I need to use a HTML solution here; and in production environment, it will be replaced by one complete HTML w/o custom element.

tuespetre · 2015-07-15T13:24:53Z

+1 on this. I'm trying to inject minified HTML templates into specific Javascript string variables.

joakimbeng · 2015-07-21T12:15:25Z

Actually I would recommend using a real template engine for this... Though I will accept #109 when it has some tests which solves this.

JustMaier · 2015-07-25T05:31:18Z

+1 here as well. Would be great if we could do something like:

.pipe(inject(gulp.src(['injects/*.html']), {
    starttag: '<!-- inject:{{filename}}:{{ext}} -->',
    transform: function (filePath, file) {
        return file.contents.toString('utf8')
    }
}))

khudia · 2015-08-30T19:06:55Z

i found the way to insert template file i need in shortcode))
the only way i don't like is filenames to be used to work correct.
so if there was file header.html => rename it to html.header
=))
gulp.task('tpl', function () { gulp.src('dev/index.html') .pipe(inject(gulp.src(['dev/templates/tpl.*']), { starttag: '', transform: function (filePath, file) { return file.contents.toString('utf8'); }})).pipe(gulp.dest('dev')); });
But i wish can use as described before

tuespetre · 2015-08-30T20:21:57Z

I have found another plugin recently that better suits this need: gulp-file-insert

On Aug 30, 2015, at 2:06 PM, Georgy Khudiakov [email protected] wrote:

i found the way to insert template file i need in shordcode))
the only way i don't like is filenames to be used to work correct.
so if there was file header.html => rename it to html.header
=))
But i wish can use as described before

gulp.task('tpl', function () {
gulp.src('dev/index.html')
.pipe(inject(gulp.src(['dev/templates/tpl.*']), {
starttag: '',
transform: function (filePath, file) {
return file.contents.toString('utf8');
}
}))

.pipe(gulp.dest('dev'));
});

—
Reply to this email directly or view it on GitHub.

zhe · 2015-10-31T01:40:51Z

Same here. I really prefer @JustMaier 's way which includes a {{filename}} option:

.pipe(inject(gulp.src(['injects/*.html']), {
    starttag: '<!-- inject:{{filename}}:{{ext}} -->',
    transform: function (filePath, file) {
        return file.contents.toString('utf8')
    }
}))

idefy · 2015-11-19T17:14:37Z

Although @JustMaier solution is simpler, it is limited to a single file. For large application, you may want to manage by folders or subfolders, or some other way even.
In the pull request I made, you get the full tagname as a parameter in the transform method, this gives you all the flexibility you need to apply your business rules as desired: no constraints.

dsozzi · 2016-07-04T15:37:22Z

+1

adumat · 2016-07-06T07:50:51Z

a solution that i've made for my project is this:

gulp.task('inject', () => {
  var stream = gulp.src(config.src)
    .pipe(inject(gulp.src(bowerFiles(), {read: false}), {name: 'bower',relative: true,ignorePath: '../', quiet: true}));
  gulp.src(config.assets, {read: false})
    .pipe(named())
    .pipe(through2.obj(function (file, enc, cb) {
      console.log('creating pipe for ' + file.named + ' with ext ' + path.extname(file.path).replace('.', ''));
      console.log(file.path);
      stream = stream.pipe(inject(gulp.src(file.path, {read: false}), {starttag: '<!-- inject:' + file.named + ':' + path.extname(file.path).replace('.', '') + ' -->',relative: true,ignorePath: '../', quiet: true}));
      this.push(file);
      cb();
    }));
  return stream.pipe(gulp.dest(config.dest));
});

but i'm waiting a better solution without create a through pipe like those provided in this thread....
then 👍 😅

liuwenchao changed the title ~~Possible to dynamically inject files depends on {{name}} ?~~ Possible to dynamically inject files depends on the name of file to be injected ? Jan 12, 2015

idefy mentioned this issue Oct 5, 2015

dynamic fillers for large apps #141

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Possible to dynamically inject files depends on the name of file to be injected ? #80

Possible to dynamically inject files depends on the name of file to be injected ? #80

liuwenchao commented Jan 12, 2015

liuwenchao commented Jan 21, 2015

joakimbeng commented Jan 25, 2015

liuwenchao commented Jan 25, 2015

tuespetre commented Jul 15, 2015

joakimbeng commented Jul 21, 2015

JustMaier commented Jul 25, 2015

khudia commented Aug 30, 2015

tuespetre commented Aug 30, 2015

zhe commented Oct 31, 2015

idefy commented Nov 19, 2015

dsozzi commented Jul 4, 2016

adumat commented Jul 6, 2016 •

edited

Loading

Possible to dynamically inject files depends on the name of file to be injected ? #80

Possible to dynamically inject files depends on the name of file to be injected ? #80

Comments

liuwenchao commented Jan 12, 2015

liuwenchao commented Jan 21, 2015

joakimbeng commented Jan 25, 2015

liuwenchao commented Jan 25, 2015

tuespetre commented Jul 15, 2015

joakimbeng commented Jul 21, 2015

JustMaier commented Jul 25, 2015

khudia commented Aug 30, 2015

tuespetre commented Aug 30, 2015

zhe commented Oct 31, 2015

idefy commented Nov 19, 2015

dsozzi commented Jul 4, 2016

adumat commented Jul 6, 2016 • edited Loading

adumat commented Jul 6, 2016 •

edited

Loading