how to inject javascript at header and body using gulp

Question

I want to inject javascript library inside head tag and my customized and my own code at body using GULP.

For Example:

<html>
    <head>
      <!-- injectJS -->
         <script src="jquery.js">
         <script src="d3.js">
      <!-- injected -->
    </head>

    <body>
      <!-- injectJS -->
         <script src="index.js">
      <!-- injected -->
    </body>
</html>

I think you are misunderstanding what GULP is. GULP is just a task-runner. It doesn't directly add html to your pages. You can configure GULP with some plugins to combine javascript files to a head.js and body.js. And then you can use those 2 files instead of adding every dependency file to the DOM. — Leroy
– Leroy, Commented May 6, 2018 at 9:09
@Mark Thanks, now i went through github.com/klei/gulp-inject — Mahesh
– Mahesh, Commented May 7, 2018 at 12:07

Simon Wicki · Accepted Answer · 2018-05-07 11:59:47Z

2

I've been using gulp-template to do exactly this. Your index.html would then have to be adjusted. e.g.:

<% scripts.forEach( function ( file ) { %>
    <script type="text/javascript" src="<%= file %>" inline></script>
<% }); %>

In this example your gulpfile task would look something like:

gulp.task('index', () =>
    gulp.src('src/index.html')
        .pipe(template({scripts: ['script.js', 'another-one.js']}))
        .pipe(gulp.dest('dist'))
    );

Another way to achieve this would be using gulp-inject. I prefer gulp-template though.

answered May 7, 2018 at 11:59

Simon Wicki

4,0705 gold badges24 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to inject javascript at header and body using gulp

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related