include introduces public code implementation methods-JS Tutorial-php.cn

include introduces public code implementation methods

小云云

Release： 2018-02-02 13:08:21

Original

2874 people have browsed it

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>

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

Then install gulp

npm install gulp --save-dev

Copy after login

Then install gulp-file-include

npm install gulp-file-include --save-dev

Copy after login

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;));
});

Copy after login

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

Copy after login

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>

Copy after login

4. Run

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

gulp fileinclude

Copy after login

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;)

Copy after login

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']);
});

Copy after login

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

gulp watch

Copy after login

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!