Exemples de mise en œuvre de l'inclusion sur des pages statiques et introduction de code commun-js tutoriel-php.cn

Exemples de mise en œuvre de l'inclusion sur des pages statiques et introduction de code commun

巴扎黑

Libérer： 2017-09-26 09:43:13

original

1367 Les gens l'ont consulté

L'éditeur suivant vous apportera un exemple d'implémentation d'include pour introduire du code public dans une page statique. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur et jetons un coup d'œil.

Le front-end de notre entreprise a toujours utilisé la fonction include de PHP pour introduire des codes courants tels que l'en-tête et le pied de page, comme suit :

<!-- 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>

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

Jusqu'à récemment, un projet nécessitait de créer une application Web, ce qui était réalisé via HBuilder. Les pages statiques sont emballé dans APP, ce qui me pose un problème.

S'il s'agit d'un petit projet, copiez-le simplement et collez-le manuellement plusieurs fois. Cependant, s'il y a beaucoup de pages, la solution copier-coller est évidemment peu fiable et le coût de maintenance est élevé.

Après avoir vérifié de nombreuses informations, j'ai finalement décidé d'utiliser gulp pour résoudre le problème. Les opérations spécifiques sont les suivantes :

Installer gulp et gulp-. file-include

Créez d'abord un nouveau dossier, localisez l'emplacement du dossier dans le terminal, puis initialisez npm

npm init

Copier après la connexion

Ensuite, installez gulp

npm install gulp --save-dev

Copier après la connexion

Ensuite, installez gulp-file-include

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

Copier après la connexion

2. Créez et configurez gulpfile.js

Ensuite, nous créons manuellement un nouveau fichier js nommé gulpfile et y écrivons le code suivant :

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

Copier après la connexion

3. Créez la structure de répertoires du projet et ajoutez le code de test

La structure globale des répertoires du projet devrait être comme ceci

app

　page

　　include

　　　header.html

　　　footer.html

　　index.html

　gulpfile.js

　package.json

Copier après la connexion

Ensuite, nous ajoutons le code de test. Il n'y a pas grand chose à dire sur header.html et footer.html. L'essentiel est que index.html soit payant. attention à la manière dont il est introduit. Le code est le suivant :

<!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>

Copier après la connexion

4. Tapez le code suivant dans le terminal pour voir l'effet d'exécution

Vous constaterez qu'il existe un dossier dist supplémentaire avec un fichier index.html dans gulp-file-include nous a aidé à générer le fichier index.html compilé final.

gulp fileinclude

Copier après la connexion

Peut-être que vous pouvez déjà tirer des conclusions. Dans gulpfile.js, nous pouvons définir manuellement l'emplacement du fichier final généré, qui est cette phrase

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

Copier après la connexion

5. Compilation automatique

Le problème de l'introduction du code public dans les pages statiques a été résolu, mais à chaque fois que vous écrivez le code source html, vous devez y aller au terminal et exécutez-le manuellement. L'opération de compilation est toujours très gênante, alors les fichiers peuvent-ils être automatiquement compilés ? La réponse doit être oui.

gulp a une méthode de surveillance, qui consiste à surveiller si le fichier a changé. Il suffit de modifier légèrement le fichier gulpfile.js et d'ajouter un morceau de code de surveillance, comme suit :

Après l'écriture, il suffit d'exécuter

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

Copier après la connexion

Chaque fois que nous enregistrons le code source html, gulp nous aidera automatiquement à le compiler.

gulp watch

Copier après la connexion

Jusqu'à présent, le problème de la façon d'implémenter l'inclusion dans une page statique et d'introduire du code public a été résolu avec succès. Enfin, les informations pertinentes sont jointes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!