Gulp introducing Header/footer to the page

Preface: In writing static page, the common head and the bottom or the sidebar, each write a page, should copy and paste, whenever modified, but also to the original header, footer modification, this and its trouble; not updated, some effects can not see the effect of the overall effect.

Solution: With gulp plug-ins can be header, footer, sidebar static page into each required page, only need to write a note, compile, will be in the note header, footer, sidebar template page inserted. Like what:

Each modified after the replacement, each introduced page will be modified

The modules that need to be used are: Gulp, FS, Gulp-replace, three, a task

A total of three template page introduced, need to increase can add pipe

First use the FS module to read the files under the target directory, here I am srcpath.htmlroot, this is the source file of the HTML root, and then traverse each file, the file placeholder <!--header--><!-- Headerend--> and <!--footer-->< are replaced with the contents of header.html and footer.html, respectively, and then the output to the original directory is OK.

Why replace the placeholder with replace instead of concat the content directly to the page? This is due to the possibility that the Gulp task can be executed multiple times, the repeated append content cannot be controlled, so the method of replacing the content with the regular match, no matter how many times the task executes does not repeat the append content.

In fact, in order to make the header, footer template changes, other pages can also automatically update the content, we can add a watch task:

Add HTML to listen, after each modification, will generate a new html,header, footer, sidebar modified, the corresponding HTML will also be modified

Gulp introducing Header/footer to the page