Gulpの実践構成(2)～中小規模プロジェクト

前の記事の gulp 設定は非常に簡単で、主にデモの表示とデバッグを目的としており、この記事では圧縮、マージ、タイムスタンプなどについて比較的詳しく説明します。

インターネット環境が比較的整っている都市では、複数の人の協力が必要な大規模プロジェクトはすべてモジュール化を使用する必要があります (ここでは主に commonjs と ES6 モジュール システムを指します。以前の require.js や sea.js ではありません)。また、コードは、単にマージするのではなく、分離して挿入する方法に重点を置きます。

しかし、多くの中小企業では、開発モデルやテクノロジーがまだ比較的伝統的であるか、小規模プロジェクトによっては最先端のテクノロジーをまったく使用する必要がありません。

つまり、この構成は主にこのような小規模および中規模のプロジェクト向けです。

1. 必要なツールとバージョン

パッケージ管理ツール：yarn v0.24.5

自動ビルドツール: gulp v4.0

2.ツールのインストール

糸でグローバル gulpjs/gulp#4.0 を追加

3. 開発環境の構成

リーリー

gulp-pug このプラグインは、以前の jade テンプレートである pug テンプレートをコンパイルするために使用されます。pug テンプレートは非常に強力なフロントエンドおよびバックエンドのユニバーサル テンプレート エンジンであり、学習も非常に簡単です。具体的な使い方については、私の他の記事を読んでください。Pug チュートリアルの記事 - Express+mongodb+pug に基づくブログ システム - Pug の記事。

gulp がタスクを監視しているときに、どこかのリンクで問題が発生すると、gulp が中断され、gulp タスクを再起動する必要があることは誰もが知っています。これは非常に面倒なことです。ここでは、gulp-notify と gulp-plumber の 2 つのプラグインを使用して、gulp タスクの中断を回避できます。

4. 本番環境の構成

リーリー

実稼働環境では、コードが更新されて新しいバージョンがリリースされるたびに、ユーザークライアントが更新されたコードをダウンロードできるように、コードを圧縮してマージする必要があります。また、CSS にタイムスタンプを付ける必要もあります。およびJSファイル。

gulp-rev は MD5 でファイルをスタンプするために特別に設計されたプラグインです。MD5 スタンプを実行した後は、当然 HTML ファイル内の参照も変更する必要があります。 MD5 がスタンプされたファイルを置き換えるために、gulp-rev-collector プラグインも必要です。

gulp-imgbase64 では、HTML ファイル内のどの img 要素を Base64 に変換するかを指定できます。さらにカスタマイズされた変換が必要な場合は、このプラグインを使用できます。

5.プロジェクトのディレクトリ構造

XXX——

— ディスト

| — html

| — css

| — img

| — js

| — リブ

| — 開発

| — html

| — css

| — img

| — js

| — リブ

| ソース

| パグ

— コンポーネント

— ページ

— レイアウト.pug

| — 少ない

— ページ

| — main.less

| — リセット.レス

— common.less

| — feature.less

| — img

| — js

| — リブ

src フォルダーにはメインのビジネス コードが含まれており、長期的なメンテナンスが必要なコードが含まれています。

dev フォルダーは、開発中に gulp がコードを生成する場所です。

dist フォルダーは、gulp がビルド中にコードを生成する場所です。

この構成では、他の多くの人が行っていたように、開発中に gulp を通じて生成されたコードを src フォルダーに配置しませんでした。これは、参照時に多くの問題が発生し、開発コード環境と実稼働コード環境をすべて分離しておくと問題が発生する可能性があるためです。 src フォルダーは、煩雑なコードを含まずに純粋な状態に保ちます。

そのため、gulp によって処理されていない一部のファイルについては、それらを dev または dist フォルダー内の対応する場所に直接コピーします。

dist フォルダーは各 gulp タスクがコードを生成する前にクリアされるため、dist フォルダーの内容を気にする必要はありません。

dev フォルダーには多くの冗長なファイルが含まれている可能性がありますが、ファイルが削除されたり上書きされたりしても影響を受けることを心配する必要はありません。必要なのは、src フォルダー内のファイルが存在することを確認することだけです。は正しい。

以上がGulpの実践構成(2)～中小規模プロジェクトの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。