Gulp file include for web designers

This npm package gulp-file-include is very helpful for designers. While developing a website theme there may be so many pages with the same content blocks like header, footer & side menu etc., Instead of placing the same content in every page using gulp-file-include can seperate same content block & can be reused on the respective pages.

PHP would come in handy here with the require or include function but since our back-end devvies prefer plain html templates that’s out of the question. gulp-file-include to the rescue!

gulp-file-include is basically the equivalent of the PHP include function with some extra bells! It gives you the possibility to include extra html partials, create if statements and dispatch variables to the partial template

Assume that below is the project structure & content

- project
 |- aboutus.html
 |- index.html
 <!-- index.html -->
 <!DOCTYPE html>
<html>
  <head>
    <title>Main page</title>
  </head>
  <body>
    <!-- header -->
    <header>
      <div class="text-center">
        <img src="https://codingship.com/assets/images/codingship.png" />
      </div>
    </header>
    <!-- page content -->
    <h1>Welcome page</h1>
  </body>
</html>
 
<!-- aboutus.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>About us page</title>
  </head>
  <body>
    <!-- header -->
    <header>
      <div class="text-center">
        <img src="https://codingship.com/assets/images/codingship.png" />
      </div>
    </header>
    <!-- page content -->
    <h1>About page</h1>
  </body>
</html>
 

Now seperate header block from index.html & aboutus and reuse it in the both pages using gulp-file-include. New file structure will be like

- project
 |- common
 |--- header.html
 |- aboutus.html
 |- index.html
# gulpfile.js
const { src, dest, series } = require("gulp");
const fileinclude = require("gulp-file-include");
function htmlTemplate() {
 return src(['index.html','aboutus.html'])
   .pipe(
     fileinclude({
       prefix: "@@",
       basepath: "@file"
     })
   )
   .pipe(dest('dist'));
}
exports.default = series(htmlTemplate);
<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>Main page</title>
  </head>
  <body>
    @@include('./common/header.html')
    <!-- page content -->
    <h1>Welcome page</h1>
  </body>
</html>
<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>About us page</title>
  </head>
  <body>
      @@include('./common/header.html')
    <!-- page content -->
    <h1>About page</h1>
  </body>
</html>
<!-- common/header.html -->
<!-- header -->
<header>
  <div class="text-center">
    <img src="https://codingship.com/assets/images/codingship.png" />
  </div>
</header>

Run gulp it will generate dist folder with two files index.html & aboutus.html with full content.

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>Main page</title>
  </head>
  <body>
    <!-- header -->
    <header>
      <div class="text-center">
        <img src="https://codingship.com/assets/images/codingship.png" />
      </div>
    </header>
    <!-- page content -->
    <h1>Welcome page</h1>
  </body>
</html>
<!-- aboutus.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>About us page</title>
  </head>
  <body>
    <!-- header -->
    <header>
      <div class="text-center">
        <img src="https://codingship.com/assets/images/codingship.png" />
      </div>
    </header>
    <!-- page content -->
    <h1>About page</h1>
  </body>
</html>

Subscribe to our Newsletter

Join our newsletter and get news in your inbox every week! We hate spam too, so no worries about this.

mail