Gulp を使用して静的 Web ページのモジュール化を実装するにはどうすればよいですか?-jsチュートリアル-php.cn

Gulp を使用して静的 Web ページのモジュール化を実装するにはどうすればよいですか?

亚连

リリース： 2018-06-12 18:09:38

オリジナル

2112 人が閲覧しました

ご存知のとおり、Gulp.js は、開発者がプロジェクト開発中の一般的なタスクを自動化するために使用できる自動ビルドツールです。次の記事では、Gulp の静的 Web ページのモジュール化の実装に関する関連情報を中心に、サンプルコードを通じて詳しく紹介しています。

はじめに

純粋に静的なページを開発する過程で、いくつかの恥ずかしい問題に遭遇することは避けられません。たとえば、コードのセット全体には 50 ページがあり、そのうち 40 ページには同じ最上位モジュールと最下位モジュールがあります。次に、同じ 2 つのコードを 40 回コピーしました (最も不快な方法)。すると、問題は解決しました。その後、何度か見た後、プロダクトマネージャーが突然、上部のある部分を再設計する必要があると言いました。。。急に恥ずかしくなってきた〜〜（馬の疾走で心がいっぱい〜）、次はどうするの？それでは、次の数千頭の馬の疾走を楽しみにしています。！！

同様の問題に対する解決策はたくさんありますが、さまざまなフレームワークを使用しない純粋なフロントエンドに関しては、iframe よりも信頼性の高い解決策は、gulp のような構築ツールを使用することです。エクスペリエンスには小さな欠陥がいくつかあるかもしれませんが (ファイルを変更した後にプレビューするたびに、最初にファイルを飲み込む必要があります)、耐えられないほどではありません。結局のところ、私たちが望んでいるのは、特定の公開モジュールを変更するだけで 40 ページを解決することです。

gulpの紹介

gulpは自動ビルドツールです。開発済みのプロジェクトでは、gulpを利用してプロジェクトを自動ビルドできるため、作業効率が大幅に向上します。

gulpのインストール

gulpをインストールする前に、まずnode.jsが正しくインストールされていることを確認してから、プロジェクトのルートディレクトリにgulpをインストールします:

$ npm install gulp

ログイン後にコピー

開発環境構成例:

Windows : ブラウザーでのプレビューを容易にするために IIS でプロジェクトをビルドします。ウェブストームエディターを使用します (慣れると、メモ帳よりもはるかに使いやすくなり、特定のフォルダーを無視することもできます)。

MacOs: ブラウザーでのプレビューを容易にするために、Apache でプロジェクトをビルドします。ウェブストームエディターを使用します (慣れてください。崇高なものよりも便利に感じられ、一部のフォルダーは無視できます)。

必須プラグイン:

gulp-file-include

スキルの説明:

モジュール化する必要があるHTMLコードを別のHTMLファイルに置きます。例: head.html

その後、必要な場所で使用します: @@include('./head.html')

ファイルパスのカスタマイズ~~

最後にgulpを設定して実行します

デモを使用する:

html:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
 <title></title>
 <link rel="stylesheet" href="css/comm.css?v=1.13" rel="external nofollow" >
 <link rel="stylesheet" href="css/template.css" rel="external nofollow" >
 <link rel="stylesheet" href="css/news.css" rel="external nofollow" >
</head>
<body>
@@include(&#39;../Layout/head.html&#39;)
<p class="news"> 
</p>
@@include(&#39;../Layout/foot.html&#39;)
</body>

ログイン後にコピー

gulp:

var gulp = require(&#39;gulp&#39;),
 fileinclude = require(&#39;gulp-file-include&#39;);
gulp.task(&#39;prew&#39;, function () {
 gulp.src([&#39;*.html&#39;,&#39;pages/*.html&#39;, &#39;!node_modules/**/*.html&#39;])
  .pipe(fileinclude({
   prefix: &#39;@@&#39;,
   basepath: &#39;@file&#39;
  }))
  .pipe(gulp.dest(&#39;prew&#39;));
 gulp.src([&#39;**/**.js&#39;, &#39;!node_modules/**/*&#39;]).pipe(gulp.dest(&#39;prew/&#39;));
 gulp.src([&#39;**/**.css&#39;, &#39;!node_modules/**/*&#39;]).pipe(gulp.dest(&#39;prew/&#39;));
 gulp.src([&#39;**/*.jpg&#39;,
  &#39;**/*.jpge&#39;,
  &#39;**/*.png&#39;,
  &#39;**/*.gif&#39;,
  &#39;**/*.bmp&#39;, &#39;!prew/**/*&#39;, &#39;!node_modules/**/*&#39;]).pipe(gulp.dest(&#39;prew/&#39;));
});
gulp.task(&#39;watch&#39;,function () {
 gulp.watch([&#39;pages/*.html&#39;,&#39;css/*.css&#39;,&#39;img/**/*&#39;,&#39;!prew/**/*.html&#39;,&#39;!prew/**/*.css&#39;,&#39;!prew/img/**/*&#39;], [&#39;prew&#39;]);
})

ログイン後にコピー

スキル紹介:

gulp prew を実行すると、ファイルが prew ディレクトリにコピーされ、対応するファイルが生成されます完成したHTMLファイル。 (gulp prew 会将文件复制到prew目录下，并生成对应的完整html文件。（注：此处将pages文件夹下的文件直接放到了prew根目录下，并非prew/pages。根据需要自改配置）

执行 gulp watch后gulp会建立一个监听进程，在开发的时候每次修改文件后，gulp会自动执行prew，这样就不用每次都手动执行gulp prew注:

pages フォルダー内のファイルは、prew/pages ではなく、prew ルートディレクトリに直接配置されます。必要に応じて構成を変更します) を実行します。 gulp watch を使用すると、gulp は開発中にファイルが変更されるたびにリスニングプロセスを確立します。そのため、毎回 gulp prew を手動で実行する必要はありません。次にブラウザを更新します。 (これは実践的なスキルです)

最後に:

この一連のスキルのポイントは、gulp の使い方ではなく、モジュールの分割方法です。各モジュールには、HTML コードに加えて、js、css コード、または js および css ファイルを導入するコードも含めることができるため、よりモジュール化できます。

上記は私があなたのためにまとめたものです。関連記事:

node.js やその他のテクノロジーを使用してログインと登録機能を実装するにはどうすればよいですか?

JSを使用してSessionStorageの値を取得する方法

JSの互換性のあるブラウザの問題について

Axiosの設定手順について(詳細なチュートリアル)

Vuexのモジュール構成の詳細な解釈

🎜 🎜 Nodejsを使ってチャット機能を実装するにはどうすればよいですか? 🎜🎜

以上がGulp を使用して静的 Web ページのモジュール化を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。