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 サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7487
15
1377
52
77
11
19
39
Java コードの保守性を最適化する方法: 経験とアドバイス
Nov 22, 2023 pm 05:18 PM
Java コードの保守性を最適化する方法: 経験とアドバイス ソフトウェア開発プロセスでは、保守性の高いコードを作成することが重要です。保守性とは、予期せぬ問題や追加の労力を引き起こすことなく、コードを簡単に理解、変更、拡張できることを意味します。 Java 開発者にとって、コードの保守性を最適化する方法は重要な問題です。この記事では、Java 開発者がコードの保守性を向上させるのに役立ついくつかの経験と提案を共有します。標準化された命名規則に従うと、コードが読みやすくなります。
Python コードのコード複雑さのエラーを解決するにはどうすればよいですか?
Jun 24, 2023 pm 05:43 PM
Python はシンプルで習得が簡単で効率的なプログラミング言語ですが、Python コードを作成すると、コードが過度に複雑になるため問題が発生する場合があります。これらの問題が解決されない場合、コードの保守が困難になり、エラーが発生しやすくなり、コードの可読性とスケーラビリティが低下します。そこで、この記事では、Python コードのコード複雑さのエラーを解決する方法について説明します。コードの複雑さについて コードの複雑さは、理解と保守が難しいコードの性質を表す尺度です。 Pythonでは使用できるインジケーターがいくつかあります
Python コードの保守性が悪いエラーを解決するにはどうすればよいですか?
Jun 25, 2023 am 11:58 AM
Python は高級プログラミング言語として、ソフトウェア開発で広く使用されています。 Python には多くの利点がありますが、多くの Python プログラマーがよく直面する問題は、コードの保守性が低いことです。 Python コードの保守性には、コードの読みやすさ、拡張性、再利用性が含まれます。この記事では、Python コードの保守性が低いという問題を解決する方法に焦点を当てます。 1. コードの可読性 コードの可読性とは、コードの可読性を指し、コードの保守性の核心となります。
Vue 大規模プロジェクトでモジュール開発を実装するためのガイド
Jun 09, 2023 pm 04:07 PM
現代の Web 開発では、Vue は柔軟で使いやすく強力なフロントエンド フレームワークとして、さまざまな Web サイトやアプリケーションの開発に広く使用されています。大規模なプロジェクトを開発する場合、コードの複雑さをどのように単純化し、プロジェクトの保守を容易にするかは、すべての開発者が直面しなければならない問題です。モジュール型開発は、コードをより適切に整理し、開発効率とコードの読みやすさを向上させるのに役立ちます。以下に、Vue 大規模プロジェクトでモジュール開発を実装するための経験とガイドラインをいくつか紹介します。 1. 大規模プロジェクトにおける明確な分業
Vue のモジュール性とは何ですか
Dec 23, 2022 pm 06:06 PM
Vue では、モジュール化とは、単一の関数をモジュール (ファイル) にカプセル化することです。モジュールは互いに分離されていますが、内部メンバーは特定のインターフェイスを通じて公開でき、他のモジュールに依存することもできます (コードの再利用を容易にするため)。開発効率が向上し、後のメンテナンスが容易になります）。モジュール開発の利点: 1. 明確な構成とメンテナンスの容易さ; 2. すべてのデータが一度に要求されず、ユーザー エクスペリエンスが良好である; 3. モジュールは相互に分離されているが、内部メンバーは特定のモジュールを通じて公開される可能性があるインターフェイス、または他のモジュールに依存します。
コードのモジュール化の練習に Go 言語を使用する方法
Aug 03, 2023 am 10:31 AM
コードのモジュール化実践のための Go 言語の使い方 はじめに: ソフトウェア開発において、コードのモジュール化は一般的な開発手法であり、コードを再利用可能なモジュールに分割することで、コードの保守性、テスト容易性、テスト容易性を向上させることができます。この記事では、Go 言語を使用してコードのモジュール化を実践する方法と、対応するコード例を紹介します。 1. モジュール化の利点により、コードの保守性が向上します。モジュール化により、コードが独立した機能モジュールに分割され、各モジュールが特定のタスクを担当するため、コードがより明確になり、変更が容易になります。コードは改善できる
Python 開発経験の概要: コードの保守性とスケーラビリティを向上させるための実践
Nov 22, 2023 pm 12:22 PM
Python 開発経験のまとめ: コードの保守性とスケーラビリティを向上させるための実践 ソフトウェア開発プロセスでは、要求の変更や関数の反復などに頻繁に遭遇するため、コードの保守性とスケーラビリティは開発プロセスの重要な部分となっています。真剣に受け止めなければならない問題。特に Python 開発では、コードの保守性とスケーラビリティをどのように改善するかが開発者の間で共通の関心事となっています。この記事では、Python コードの保守性とスケーラビリティを向上させるためのいくつかの実践方法を要約し、Python 開発者に何らかのメリットをもたらすことを期待します。
Chaon、TGS-1000シリーズ産業用ミニホストを発売：スタッキングインターフェース拡張モジュールをサポートし、MTLプロセッサを搭載
Aug 14, 2024 pm 01:33 PM
8月14日のこのウェブサイトのニュースによると、Chaoen Vecowは第1世代Intel Core Ultraプロセッサを搭載したTGS-1000シリーズ産業用ミニホストを北京時間7月22日に発売した。このシリーズの製品の特徴は、追加の I/O ポートを拡張するための垂直スタッキングをサポートしていることです。 TGS-1000 シリーズは、TGS-1000 と TGS-1500 の 2 つのモデルに分かれています。違いは、TGS-1500 の下部に、Intel Ruixuan A370M または最大 RTX5000Ada モバイル バージョンをサポートするモジュールが含まれていることです。 NVIDIA プロフェッショナル カードの。 ▲TGS-1500TGS-1000 シリーズ ミニ ホストは、デュアル D を搭載した Intel Core Ultra7165H または Ultra5135H プロセッサーを搭載しています。
