概要ソフトウェア開発において、タスクランナーの利点は明らかです。これらは、一般的な面倒なタスクを自動化するのに役立ち、優れたコードの作成など、より重要なことに集中できるようになります。本当に、画像圧縮、コードの縮小、ユニットテストなどのタスクを自動化する機能は、本当に時間を節約してくれます。 多くのフロントエンド開発者にとって、現在最も一般的に使用されているタスク マネージャーは 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 レジストリから gulp を取得し、コマンドラインから直接アクセスできるようにシステム全体にインストールします。 gulp がインストールされたので、プロジェクトで使い始めましょう。 Gulp.jsを使用してプロジェクトを作成するプロジェクトで Gulp を使用するには、次の重要なポイントを完了する必要があります。
Gulp が設定ファイルを使用できるように、プロジェクト パスで上記の点を完了してください。 まず、依存パッケージをインストールします。
ここで、構成ファイルで定義されたタスクを実行する Gulp プラグインをインストールする必要があります。これらのプラグインは Node パッケージなので、インストールには npm を使用します。
ここでは 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 を超えるプラグインを提供しています。
他にもたくさんあります... 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 つを定義します。
実行するタスクを定義するには、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の他の関連記事にも注目してください。 以下もご興味があるかもしれません:
|
<<: ウィンドウ環境設定Mysql 5.7.21 windowx64.zip無料インストール版チュートリアル詳細説明
>>: Linux システムに Spring Boot アプリケーションをインストールするための詳細なチュートリアル
目次最初のステップのインストールステップ2: MySQLデータを準備する3 番目のステップは、bin...
アクセス回数が増えると、時間のかかるデータベース読み取り操作では、データベースへの負荷を軽減するため...
この記事では、ドラッグ効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します...
ファイアウォールファイアウォールは一連のルールです。パケットが保護されたネットワーク空間に出入りする...
1. 永続的な統計情報の重要性:統計は、MySQL が実行プランを生成するためのガイドとして使用され...
ナビゲーションバーのサブメニューを再帰的に生成すると、メニューは正常に生成できるが、マウスをホバーす...
目次MySQL 8 の WITH クエリについて学ぶ1. 例3. 練習するMySQL 8 の WIT...
この記事の例では、テーブル行データのスクロール効果を実現するためのjQueryの具体的なコードを参考...
C++でMySQLに接続する際の参考情報です。具体的な内容は以下のとおりです。 MySQLCon ク...
目次概要ハッシュプロパティホストプロパティホスト名属性Href属性起源のプロパティユーザー名とパスワ...
概要binlog2sql は、Python で開発されたオープンソースの MySQL Binlog ...
Windows 2003+IIS6 の fastcgi 構成ファイル fcgiext.ini を最適...
Docker は多くのスペースを占有します。コンテナを実行したり、イメージを取得したり、アプリケー...
同僚から、一時テーブルを使用して変数データを挿入して表示する方法を教わったことがありますが、この方法...
0. システム要件CPU I5-10400F以上メモリ 16 GB、32 GBのメモリが最適ハードド...