ホームページ > 記事 > ウェブフロントエンド > Gulp を使用して静的 Web ページのモジュール化を実装するにはどうすればよいですか?
ご存知のとおり、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('../Layout/head.html') <p class="news"> </p> @@include('../Layout/foot.html') </body>
gulp:
var gulp = require('gulp'),
fileinclude = require('gulp-file-include');
gulp.task('prew', function () {
gulp.src(['*.html','pages/*.html', '!node_modules/**/*.html'])
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest('prew'));
gulp.src(['**/**.js', '!node_modules/**/*']).pipe(gulp.dest('prew/'));
gulp.src(['**/**.css', '!node_modules/**/*']).pipe(gulp.dest('prew/'));
gulp.src(['**/*.jpg',
'**/*.jpge',
'**/*.png',
'**/*.gif',
'**/*.bmp', '!prew/**/*', '!node_modules/**/*']).pipe(gulp.dest('prew/'));
});
gulp.task('watch',function () {
gulp.watch(['pages/*.html','css/*.css','img/**/*','!prew/**/*.html','!prew/**/*.css','!prew/img/**/*'], ['prew']);
})スキル紹介:
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の値を取得する方法
🎜 🎜 Nodejsを使ってチャット機能を実装するにはどうすればよいですか? 🎜🎜以上がGulp を使用して静的 Web ページのモジュール化を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。