Maison > Article > interface Web > include introduit les méthodes de mise en œuvre du code public

include introduit les méthodes de mise en œuvre du code public

小云云original: 2018-02-02 13:08:212919parcourir

Depuis longtemps, le front-end de notre entreprise utilise la fonction include de PHP pour introduire des codes courants tels que l'en-tête et le pied de page. Cet article vous apporte principalement un exemple d'implémentation d'inclusion pour introduire des codes courants 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 pour y jeter un œil, j'espère que cela pourra aider tout le monde.

J'aime ça :

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

Jusqu'à récemment, un projet nécessitait de créer une application Web et la page statique était intégrée dans une application via HBuilder, ce qui m'a posé 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

Ensuite, installez gulp

npm install gulp --save-dev

Ensuite, installez gulp-file-include

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

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

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

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>

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

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

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

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

gulp watch

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.

Recommandations associées :

Comment utiliser le contenu du fichier d'inclusion dans les fichiers HTML

jQuery.load() et Jsp Explication détaillée de la différence entre include

La différence entre include et require en php

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!

php jquery gulp html npm include require JS

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：La zone de saisie limite la valeur d'entrée au partage de code à virgule flottanteArticle suivant：La zone de saisie limite la valeur d'entrée au partage de code à virgule flottante

Articles Liés

Voir plus