For a long time, our front-end has used the include function of php to implement the introduction of common codes such as header and footer, just like the following:
<!-- -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<?php include(''); ?>
<div>Page main part</div>
<?php include(''); ?>
</body>
</html>
<!-- --> <header>This is the head</header>
<!-- --> <footer>This is the bottom</footer>
Until recently, a project needed to make a webapp, which used HBuilder to package static pages into apps, which made me face a difficult problem.
If it is a small project, just copy and paste it manually several times. However, if there are many pages, the copy and paste solution is obviously unreliable and the maintenance cost is also high.
After checking a lot of information, I finally decided to use gulp to solve the problem. The specific operation is as follows:
1. Install gulp and gulp-file-include
First create a new folder, locate the folder location in the terminal, and then perform npm initialization
npm init
Then install gulp
npm install gulp --save-dev
Then install gulp-file-include
npm install gulp-file-include --save-dev
2. Create and configure
Then we manually create a new js file and name it gulpfile and write the following code in it:
var gulp = require('gulp');
var fileinclude = require('gulp-file-include');
('fileinclude', function () {
// Adapt all html under all folders in the page, and exclude html in the include folder under the page (['page/**/*.html', '!page/include/**.html'])
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(('dist'));
});
3. Create a project directory structure and add test code
The overall directory structure of the project should be like this
app page include
Then we add the test code, and there is not much to say, mainly to pay special attention to the introduction method, the code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
@@include('include/')
<div>Page main part</div>
@@include('include/')
</body>
</html>
4. Run
Type in the following code in the terminal to see the execution effect
gulp fileinclude
You will find that there is an extra dist folder, which contains a file. Gulp-file-include has helped us generate the final compiled file.
Maybe you can already learn from it. In this sentence, we can manually set the location of the final generated file.
('dist')
5. Automatic compilation
The problem of introducing public code on static pages has been solved, but every time I write the source html, it is still very troublesome to manually execute the compilation operation in the terminal. So can the file be automatically compiled? The answer must be OK.
gulp has a watch method, which is to monitor whether the file has changed. We just need to modify the file slightly and add a piece of listening code, as follows:
var gulp = require('gulp');
var fileinclude = require('gulp-file-include');
('fileinclude', function () {
// Adapt all html under all folders in the page, and exclude html in the include folder under the page (['page/**/*.html', '!page/include/**.html'])
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(('dist'));
});
('watch', function () {
('page/**/*.html', ['fileinclude']);
});
After writing, we just need to execute it in the terminal
gulp watch
Every time we save the source html, gulp will automatically compile it for us.
At this point, the problem of how to implement include the problem of introducing public code on static pages was successfully solved, and finally the relevant information was attached.
The above example of the static page implementation include introducing public code is all the content I have shared with you. I hope you can give you a reference and I hope you can support me more.