ホームページ > 記事 > ウェブフロントエンド > include パブリックコード実装メソッドを導入します

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

小云云オリジナル: 2018-02-02 13:08:212927ブラウズ

弊社のフロントエンドでは長い間、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 の実装方法の問題は正常に解決されました。最後に関連情報を添付します。

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

関連記事

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