ホームページ > 記事 > ウェブフロントエンド > Gulp は静的 Web ページのモジュール化サンプル共有を実装します
Gulp は静的 Web ページのモジュール化サンプル共有を実装します
- 小云云オリジナル
- 2018-01-11 09:35:071920ブラウズ
純粋に静的なページを開発する過程では、いくつかの厄介な問題に遭遇することは避けられません。たとえば、コードのセット全体には 50 ページがあり、そのうち 40 ページには同じ最上位モジュールと最下位モジュールがあります。次に、同じ 2 つのコードを 40 回コピーしました (最も不快な方法)。ご存知のとおり、Gulp.js は、開発者がプロジェクト開発中の一般的なタスクを自動化するために使用できる自動ビルド ツールです。次の記事では、Gulp の静的 Web ページのモジュール化の実装に関する関連情報を中心に、サンプル コードを通じて詳しく紹介しています。
同様の問題に対する解決策はたくさんありますが、さまざまなフレームワークを使用しない純粋なフロントエンドに関しては、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 ファイルが生成されます。 (注: ここでは、pages フォルダー内のファイルは prew/pages ではなく、prew ルート ディレクトリに直接配置されています。必要に応じて構成を変更します)
gulp watch を実行した後、gulp は開発中に毎回リッスン プロセスを確立します。ファイルを変更した後、gulp は自動的に prew を実行するため、毎回手動で gulp prew を実行してブラウザを更新する必要はありません。 (これは実践的なスキルです)
最後に:
この一連のスキルのポイントは、gulp の使い方ではなく、モジュールの分割方法です。実際には、各モジュールには HTML コードに加えて、js、css コード、または js および css ファイルを導入するコードも含めることができるため、よりモジュール化することができます。
関連する推奨事項:
Github 上のプロジェクトが静的 Web ページとして公開されるとどうなりますか?
静的な Web ページのページングをシミュレートする特殊効果コードの例を共有します
Web サイト全体から HTML 純粋な静的な Web ページを生成する PHP の方法の概要
以上がGulp は静的 Web ページのモジュール化サンプル共有を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。