フロントエンドタスク構築のための強力なツールであるGulp.jsの使い方を詳しく説明します

フロントエンドタスク構築のための強力なツールであるGulp.jsの使い方を詳しく説明します

概要

ソフトウェア開発において、タスクランナーの利点は明らかです。これらは、一般的な面倒なタスクを自動化するのに役立ち、優れたコードの作成など、より重要なことに集中できるようになります。本当に、画像圧縮、コードの縮小、ユニットテストなどのタスクを自動化する機能は、本当に時間を節約してくれます。

多くのフロントエンド開発者にとって、現在最も一般的に使用されているタスク マネージャーは Grunt です。これは、Gruntfile.js ファイルで JavaScript を使用してさまざまな実行タスクを定義できるツールです。基本的に、JavaScript を知っていれば、Grunt タスクの作成は非常にシンプルで簡単です。 jsHint、Sass、Uglify などの豊富なサードパーティ製プラグインにより、Grunt は最も拡張性の高いツールの 1 つとなっています。

ほとんどの人にとって、Grunt は常にタスク ランナーとして選ばれてきました。しかし、最近ではGulp.jsというツールが、インストールが簡単で、設定ファイルも非常にシンプルで読みやすく管理しやすいことから注目を集めています。

Gulp.jsをインストールする

Gulp.js は、Grunt と同様に、Node をベースにしたタスク実行ツールです。したがって、実行するには Node をインストールする必要があります。オペレーティング システムに応じて、Gulp をインストールする方法はいくつかあります。 OS X では、複数の Node.js バージョンを管理するための Tim Caswell による優れたスクリプトである nvm を使用します。公式 Node.js Web サイトからバイナリを直接ダウンロードすることもできます。 Node について何も知らない場合は、まず Nettuts+ シリーズを見て、Node.js に慣れることをお勧めします。

npm (Node パッケージ マネージャー) を使用して Gulp をすばやくインストールできます。ターミナルを開いて次のように入力します:

npm インストール -g gulp

このコマンドは、npm レジストリから gulp を取得し、コマンドラインから直接アクセスできるようにシステム全体にインストールします。

gulp がインストールされたので、プロジェクトで使い始めましょう。

Gulp.jsを使用してプロジェクトを作成する

プロジェクトで Gulp を使用するには、次の重要なポイントを完了する必要があります。

  • 2つの依存パッケージをインストールする
  • 使用したいプラグインをインストールします
  • Gulp.jsファイルを作成し、実行するタスクを定義します。

Gulp が設定ファイルを使用できるように、プロジェクト パスで上記の点を完了してください。

まず、依存パッケージをインストールします。

npm をインストール --save-dev gulp gulp-util

ここで、構成ファイルで定義されたタスクを実行する Gulp プラグインをインストールする必要があります。これらのプラグインは Node パッケージなので、インストールには npm を使用します。

npm インストール --save-dev gulp-uglify gulp-concat

ここでは 2 つのプラグインをインストールしました。これにより、Uglify.js コンプレッサーを使用して JavaScript コードを縮小/圧縮し、複数の JS ファイルを 1 つのファイルにマージできるようになります。

ここで --save-dev を使用していることに注意してください。これにより、Gulp の依存関係とプラグインを現在のプロジェクトにのみインストールできます。これを行うと、package.json の devDependencies リストに各依存関係に対応するエントリが生成されます。以下のように表示されます。

{
  「devDependencies」: {
    "gulp-util": "~2.2.13",
    "gulp": "~3.5.0",
    "gulp-uglify": "~0.2.0",
    "gulp-concat": "~2.1.7"
  }
}

これにより、プロジェクトの依存関係とプラグインが npm を使用してインストールされるようになります。プロジェクトに package.json ファイルがない場合、コマンド ラインで npm init と入力するか、エディターで手動で作成し、対応する中括弧を入力して、「package.json」として保存します。更新するには、コマンド ラインに npm コマンドを入力します。中括弧が必要であることに注意してください。中括弧がないと、--save-dev を使用しようとすると、有効な JSON ファイルではないというエラーが npm からスローされます。

このガイドでは 2 つのプラグインのみを使用しましたが、Gulp はさまざまな機能ニーズを満たすために 200 を超えるプラグインを提供しています。

  • ライブリロード (gulp-livereload)
  • JSHint(gulp-jshint)
  • サス(ゴクゴク)
  • CoffeeScript ファイルのコンパイル (gulp-coffee)

他にもたくさんあります...

gulpfile.js の翻訳

Grunt と同様に、Gulp には gulpfile.js と呼ばれる構成ファイルがあり、タスクを実行するために必要なすべてのプラグインを定義します。このファイルはプロジェクトのルート ディレクトリに作成する必要があります。

シンプルでわかりやすい構文により、gulp ファイルは非常に読みやすく理解しやすくなります。

var gulp = require('gulp')、
gutil = require('gulp-util')、
uglify = require('gulp-uglify')、
concat = require('gulp-concat');

上記のコードは、指定されたタスクを完了するためにどのプラグインを参照する必要があるかを gulp に伝えるだけです。

次に、Gulp が実行するタスクを定義する必要があります。ここでは、次の 2 つを定義します。

  • 画像を圧縮する
  • JSファイルを縮小する

実行するタスクを定義するには、Gulp メソッド task() を使用します。

gulp.task('js', 関数() {
    gulp.src('./js/*.js')
        .pipe(uglify())
        .pipe(連結('all.js'))
        .pipe(gulp.dest('./js'));
});

上記のコードを見ると、参照されたプラグインで構成される混合メソッド呼び出しが使用されています。最初のメソッド task() は、現在のタスクを表す名前 (ここでは「js」と呼ばれます) と、実際の操作をカプセル化する匿名メソッドを使用します。コードを分解してみましょう:

gulp.src('./js/*.js')

src() メソッドは、圧縮する必要がある JS ファイルの場所を指定し、それを、後続の実行プラグインに渡されるドキュメント構造を含むデータ ストリームに変換します。これは Node.js Streams API の一部であり、Gulp が簡潔な API 構文を持つ理由の 1 つです。

.pipe(uglify())

pipe() メソッドは、src() メソッドから渡されたデータ ストリームを取得し、指定されたプラグインに渡します。現在の例では、プラグイン uglify がデータ ストリームを受信します。

.pipe(連結('all.js'))

uglify と同様に、concat プラグインは pipe() を介して渡されたデータ ストリームを受け取り、複数の JS ファイルを 'all.js' にマージします。

.pipe(gulp.dest('./js'));

最後に、Gulp の dest() メソッドを使用して、all.js を指定されたディレクトリに書き込みます。プロセス全体は簡潔で読みやすいです。

最後にもう 1 つ必要なことは、Gulp のデフォルト タスクを「js」を実行するように変更することです。

gulp.task('default', 関数(){
    gulp.run('js'); 
});

コマンドラインに戻り、「gulp」と入力します。Gulp は gulpfile.js ファイルを見つけ、すべての依存関係とプラグインをロードし、デフォルトのタスク「js」を実行します。最終実行結果では、ファイルが圧縮され、結合されていることがわかります。

もう少し近づいてみましょう。 Gulp には、指定されたリソースへの変更を監視できる watch() という別のメソッドが用意されています。この方法を使用すると、タスクを実行するために手動で「gulp」と入力する代わりに、リソースの変更に基づいてタスクを自動的に実行できます。

gulp.watch('./js/*', 関数() {
     gulp.run('js');
});

上記のコードが実行されると、Gulp は指定されたリソースを継続的に監視し、リソースが変更されると 'js' メソッドを再度実行します。この機能は素晴らしいです!

Gulp.jsへの移行

初めて Gulp について聞いたとき、私の最初の反応は「また素晴らしいツールだ!」でした。 Gulp.js には、タスクの構築を簡単にする魅力的な構文と API があります。 Grunt のプラグイン ライブラリほど豊富ではありませんが、特に多くの開発者が興味を持っている現在では、プラグイン ライブラリは日々成長しているようです。

以上がフロントエンドタスク構築の強力なツールであるGulp.jsの使い方ガイドの詳細な内容です。Gulp.jsの使い方ガイドの詳細については、123WORDPRESS.COMの他の関連記事にも注目してください。

以下もご興味があるかもしれません:
  • 小さなプログラムを簡単に開発するためのvscode+gulpの完全な手順
  • webpack/gulp を使用して TypeScript プロジェクトを構築する方法の例
  • gulp を使って小さなプログラムを構築する方法
  • Bootstrap4 gulp 設定の詳細
  • gulp を使用してフロントエンドの自動化を構築する例
  • gulp を書くときに遭遇する ES6 の問題の詳細な説明
  • Nodejsはgulpを使用してフロントエンドファイルを管理します
  • gulp を使用して Laravel でフロントエンド リソースを構築する方法
  • gulp-uglify を使用して angularjs を圧縮した後に発生するエラーの解決方法
  • gulp と bower で angular1 を使用するチュートリアル

<<:  ウィンドウ環境設定Mysql 5.7.21 windowx64.zip無料インストール版チュートリアル詳細説明

>>:  Linux システムに Spring Boot アプリケーションをインストールするための詳細なチュートリアル

推薦する

binlog2sql と簡単なバックアップおよびリカバリを使用して mysql8.0.20 を構成するための詳細な手順

目次最初のステップのインストールステップ2: MySQLデータを準備する3 番目のステップは、bin...

MySQL マスター/スレーブ データベース同期構成と一般的なエラー

アクセス回数が増えると、時間のかかるデータベース読み取り操作では、データベースへの負荷を軽減するため...

シンプルなドラッグ効果を実現するJavaScript

この記事では、ドラッグ効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します...

iptables および firewalld ツールを使用して Linux ファイアウォール接続ルールを管理する

ファイアウォールファイアウォールは一連のルールです。パケットが保護されたネットワーク空間に出入りする...

MySQL 永続統計の詳細な説明

1. 永続的な統計情報の重要性:統計は、MySQL が実行プランを生成するためのガイドとして使用され...

Element-ui NavMenuサブメニューを使用して再帰的に生成する場合のエラーの詳細な説明

ナビゲーションバーのサブメニューを再帰的に生成すると、メニューは正常に生成できるが、マウスをホバーす...

MySQL 8.0 WITH クエリの詳細

目次MySQL 8 の WITH クエリについて学ぶ1. 例3. 練習するMySQL 8 の WIT...

jQueryはテーブル行データのスクロール効果を実現します

この記事の例では、テーブル行データのスクロール効果を実現するためのjQueryの具体的なコードを参考...

C++ を使用して MySQL に接続する方法

C++でMySQLに接続する際の参考情報です。具体的な内容は以下のとおりです。 MySQLCon ク...

JavaScriptのURLオブジェクトとは何かについて話しましょう

目次概要ハッシュプロパティホストプロパティホスト名属性Href属性起源のプロパティユーザー名とパスワ...

MySQL フラッシュバック ツール binlog2sql の詳細なインストールと設定のチュートリアル

概要binlog2sql は、Python で開発されたオープンソースの MySQL Binlog ...

Docker が占有するディスク領域をクリーンアップする方法

Docker は多くのスペースを占有します。コンテナを実行したり、イメージを取得したり、アプリケー...

MySQLでストアドプロシージャをデバッグする最も簡単な方法

同僚から、一時テーブルを使用して変数データを挿入して表示する方法を教わったことがありますが、この方法...

Docker で onlyoffice をインストールして展開する詳細なプロセス

0. システム要件CPU I5-10400F以上メモリ 16 GB、32 GBのメモリが最適ハードド...