Gulp は静的 Web ページのモジュール化サンプル共有を実装します-jsチュートリアル-php.cn

Gulp は静的 Web ページのモジュール化サンプル共有を実装します

小云云

リリース： 2018-01-11 09:35:07

オリジナル

1940 人が閲覧しました

純粋に静的なページを開発する過程では、いくつかの厄介な問題に遭遇することは避けられません。たとえば、コードのセット全体には 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 ファイルを導入するコードも含めることができるため、よりモジュール化することができます。