概要ソフトウェア開発において、タスクランナーの利点は明らかです。これらは、一般的な面倒なタスクを自動化するのに役立ち、優れたコードの作成など、より重要なことに集中できるようになります。本当に、画像圧縮、コードの縮小、ユニットテストなどのタスクを自動化する機能は、本当に時間を節約してくれます。 多くのフロントエンド開発者にとって、現在最も一般的に使用されているタスク マネージャーは 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 アプリケーションをインストールするための詳細なチュートリアル
関連文書この記事の一部は、https://www.cnblogs.com/zhongchao666/...
目次序文チェック制約作成、削除、表示制限要約する序文MySQL 8.0 では、チェック制約という非常...
DIV フローティング効果 (固定位置) は CSS のみで実装されており、IE8、360、Fir...
この記事では、時間範囲効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します...
目次1. MySQL論理アーキテクチャの概要2. コネクタクエリキャッシュ4. パーサー5. オプテ...
みなさんこんにちは。今日は Linux コマンド クエリ アプレットでの WePY クラウド開発の実...
序文サーバーを展開した後、私は大きな喜びを感じながら自分の Web サイトにアクセスし、見たものすべ...
目次制御されていないコンポーネント制御コンポーネント知らせ結論は制御されていないコンポーネントフォー...
目次1. 基本2. 問題の説明3. 解決策付録: js を使用して Excel の日付形式を変換する...
背景プロジェクトにはメニューノードのすべてのノードをチェックする要件があります。オンラインでチェック...
背景:インターフェイスを提供する Flask プロジェクトがあり、これは Docker コンテナを使...
kubectl の紹介kubectl は、k8s クラスターを操作するためのコマンドライン ツールで...
概要インデックス作成は、MySQL で習得しなければならないスキルであり、MySQL クエリの効率を...
1. Navicatの紹介1. Navicat とは何ですか? Navicat は強力な MySQ...
これら 6 つの記事を書いた後、私は少し混乱し始めました。次にどこに書けばいいのか分かりません。ドメ...