How to introduce public code to include static pages and include static pages

How to introduce public code to include static pages and include static pages

For a long time, our front-end uses the include function of php to introduce public Code such as header and footer, as shown below:

<! -- Index. php --> <! DOCTYPE html> 
<! -- Header. php --> 
<! -- Footer. php --> <footer> This is the bottom </footer>
Until a recent project needs to create a webapp, which uses HBuilder to package static pages into apps, which makes me encounter a problem.
If it is a small project, copy and paste it several times. However, if there are many pages, the copy and paste solution is obviously unreliable and the maintenance cost is high.
After checking a lot of information, we finally decided to use gulp to solve the problem. The specific operations are as follows:
1. Install gulp and gulp-file-include
Create a new folder, locate the folder in the terminal, and initialize npm.
npm init
Then install gulp
npm install gulp --save-dev
Install gulp-file-include
npm install gulp-file-include --save-dev
2. Create and configure gulpfile. js
Then we manually create a js file named gulpfile and write the following code in it:
Var gulp = require ('gulp'); var fileinclude = require ('Gulp-file-include '); gulp. task ('fileinclude ', function () {// adapt to all html under all folders in the page, exclude html gulp from the include folder in the page. src (['page /**/*. html ','! Page/include /**. html ']). pipe (fileinclude ({prefix: '@', basepath: '@ file '})). pipe (gulp. dest ('dist '));});
3. Create a project directory structure and add test code
The overall directory structure of the project should be as follows:
app
　page
　　include
　　　header.html
　　　footer.html
　　index.html
　gulpfile.js
　package.json
After all, we did not have much to say about the testing code header.html and footer.html, mainly because index.html should pay special attention to the introduction method. The Code is as follows:
<! DOCTYPE html> 4. Run
Enter the following code in the terminal to check the execution result.
gulp fileinclude
We will find that there is a dist folder with an index.html file, and gulp-file-include has helped us generate the final compiled index.html file.
You may already be able to draw the opposite line. In gulpfile. js, We can manually set the location of the final generated file.
gulp.dest('dist')
5. automatic compilation
The problem of introducing public code to static pages has been solved, but it is still difficult to manually execute the compilation operation on the terminal every time you write the source html. Can you enable automatic file compilation? The answer must be yes.
Gulp has a watch method, that is, whether the listening file has changed. We only need to slightly modify the gulpfile. js file and add a piece of listening code, as shown below:
Var gulp = require ('gulp'); var fileinclude = require ('Gulp-file-include '); gulp. task ('fileinclude ', function () {// adapt to all html under all folders in the page, exclude html gulp from the include folder in the page. src (['page /**/*. html ','! Page/include /**. html ']). pipe (fileinclude ({prefix: '@', basepath: '@ file '})). pipe (gulp. dest ('dist');}); gulp. task ('Watch ', function () {gulp. watch ('page /**/*. html ', ['fileinclude']);});
After writing, we only need to execute
gulp watch
Every time we save the source html, gulp will automatically compile it for us.
At this point, how to introduce public code into static pages through include is solved smoothly, and relevant information is attached.
 
Appendix:
The header and bottom of an HTML static page are the same. How can we make each page call a public header and a bottom?
How does static html include header and footer?
In the static page Demo project, how does one include headers and footer like PHP?
Grunt-html-imports