Home > Article > Web Front-end > include introduces public code implementation methods

include introduces public code implementation methods

小云云Original: 2018-02-02 13:08:212926browse

Our company's front-end has always used PHP's include function to introduce common codes such as header and footer. This article mainly brings you an example of introducing common codes through include in a static page. The editor thinks it is quite good, so I will share it with you now and give it as a reference for everyone. Let’s follow the editor to take a look, I hope it can help everyone.

Like this:

<!-- index.php -->
 
<!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(&#39;header.php&#39;); ?>
  <p>页面主体部分</p>
  <?php include(&#39;footer.php&#39;); ?>
</body>
</html>

<!-- header.php -->
<header>这是头部</header>

<!-- footer.php -->
<footer>这是底部</footer>

Until recently A project needs to be made into a webapp, and static pages are packaged into APP through HBuilder, which brings me to a problem.

If it is a small project, just copy and paste it manually several times. However, if there are many pages, the copy-paste solution is obviously unreliable and the maintenance cost is high.

After checking a lot of information, I finally decided to use gulp to solve the problem. The specific operations are as follows:

1. Install gulp and gulp-file-include

First create a new folder, locate the folder location in the terminal, and then initialize npm

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 gulpfile.js

Then we manually create a new js file named gulpfile and write the following code in it:

var gulp = require(&#39;gulp&#39;);
var fileinclude = require(&#39;gulp-file-include&#39;);
 
gulp.task(&#39;fileinclude&#39;, function () {
  // 适配page中所有文件夹下的所有html，排除page下的include文件夹中html
  gulp.src([&#39;page/**/*.html&#39;, &#39;!page/include/**.html&#39;])
    .pipe(fileinclude({
      prefix: &#39;@@&#39;,
      basepath: &#39;@file&#39;
    }))
    .pipe(gulp.dest(&#39;dist&#39;));
});

3. Create the project directory structure and add the test code

The overall directory structure of the project should be like this

app

　page

　　include

　　　header.html

　　　footer.html

　　index.html

　gulpfile.js

　package.json

Then we add the test code. There is not much to say about header.html and footer.html. The main thing is that index.html should pay special attention to the way it is introduced. 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(&#39;include/header.html&#39;)
  <p>页面主体部分</p>
  @@include(&#39;include/footer.html&#39;)
</body>
</html>

4. Run

Type the following code in the terminal to see the execution effect

gulp fileinclude

will Found that there is an additional dist folder with an index.html file in it. gulp-file-include has helped us generate the final compiled index.html file.

Maybe you can already draw inferences. In gulpfile.js, we can manually set the location of the final generated file, which is this sentence

gulp.dest(&#39;dist&#39;)

5. Automatic compilation

The problem of introducing public code into static pages has been solved, but every time after writing the source html, you have to go to the terminal to manually perform the compilation operation It's still very troublesome. Can the file be automatically compiled? The answer must be yes.

gulp has a watch method, which is to monitor whether the file has changed. We only need to slightly modify the gulpfile.js file and add a piece of monitoring code, as follows:

var gulp = require(&#39;gulp&#39;);
var fileinclude = require(&#39;gulp-file-include&#39;);
 
gulp.task(&#39;fileinclude&#39;, function () {
  // 适配page中所有文件夹下的所有html，排除page下的include文件夹中html
  gulp.src([&#39;page/**/*.html&#39;, &#39;!page/include/**.html&#39;])
    .pipe(fileinclude({
      prefix: &#39;@@&#39;,
      basepath: &#39;@file&#39;
    }))
    .pipe(gulp.dest(&#39;dist&#39;));
});
 
gulp.task('watch', function () {
  gulp.watch('page/**/*.html', ['fileinclude']);
});

After writing, we only need to execute it in the terminal

gulp watch

Every time we save the source html, gulp will automatically compile it for us .

So far, the problem of how to implement include in a static page and introduce public code has been successfully solved. Finally, relevant information is attached.

Related recommendations:

How to use the include file content in the html file

jQuery.load() and Jsp Detailed explanation of the difference between include

The difference between include and require in php

The above is the detailed content of include introduces public code implementation methods. For more information, please follow other related articles on the PHP Chinese website!

php jquery gulp html npm include require JS

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：The input box limits the input value to floating point code sharingNext article：The input box limits the input value to floating point code sharing

See more

include introduces public code implementation methods

Related articles