include パブリックコード実装メソッドを導入します-jsチュートリアル-php.cn

include パブリックコード実装メソッドを導入します

小云云

リリース： 2018-02-02 13:08:21

オリジナル

2919 人が閲覧しました

弊社のフロントエンドでは長い間、PHPのinclude関数を利用してヘッダーやフッターなどのパブリックコードを導入してきましたが、この記事では主に静的ページにパブリックコードを導入するためのインクルード実装例を紹介します。編集者はこれが非常に良いものだと思ったので、皆さんの参考として今から共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

次のように:

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

ログイン後にコピー

最近まで、プロジェクトでは Web アプリを作成する必要があり、HBuilder を使用して静的ページを APP にパッケージ化しており、問題が発生していました。

小規模なプロジェクトの場合は、手動でコピーして貼り付けるだけで済みます。ただし、ページ数が多い場合、コピーして貼り付けるソリューションは明らかに信頼性が低く、メンテナンスのコストが高くなります。

多くの情報を確認した後、最終的に問題を解決するためにgulpを使用することにしました:

1. gulpとgulp-file-includeをインストールします

まず新しいフォルダーを作成します。端末フォルダーの場所にあるファイルを見つけて、npm 初期化を実行します

npm init

ログイン後にコピー

その後、gulp をインストールします

npm install gulp --save-dev

ログイン後にコピー

次に、gulp-file-include をインストールします

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

ログイン後にコピー

2 を作成して構成します。 gulpfile.js

次に、gulpfile という名前の新しい js ファイルを手動で作成し、その中に次のコードを書き込みます:

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. プロジェクトのディレクトリ構造を作成し、テストコード

を追加します。プロジェクトの全体的なディレクトリ構造は次のようになります

app

　page

　　include

　　　header.html

　　　footer.html

　　index.html

　gulpfile.js

　package.json

ログイン後にコピー

次に、テストコードを追加します。header.html と footer.html については特に言うことはありません。重要なことは、index.html に特別な注意を払う必要があるということです。導入方法に注意してください: コードは次のとおりです:

<!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 を実行し、ターミナルに次のコードを入力して実行結果を確認します

gulp fileinclude

ログイン後にコピー

gulp-file-include を使用すると、index.html ファイルを含む追加の dist フォルダーがあることがわかります。最終的にコンパイルされたindex.html ファイルが生成されます。

おそらく、既に推論を行うことができます。gulpfile.js では、最終的に生成されるファイルの場所を手動で設定できます

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

ログイン後にコピー

5. 自動コンパイル

問題は解決されましたが、ソース HTML を記述した後に毎回ターミナルに移動して手動でコンパイル操作を実行するのは非常に面倒です。ファイルを自動的にコンパイルできますか?答えは「はい」でなければなりません。 gulp にはファイルが変更されたかどうかを監視するための watch メソッドがあり、次のように gulpfile.js ファイルを少し変更して監視コードを追加するだけです。、ターミナルにログインするだけです。ソース HTML を保存するたびに、gulp が自動的にコンパイルします。

これまでのところ、静的ページにパブリックコードを導入するための include の実装方法の問題は正常に解決されました。最後に関連情報を添付します。