Gulpを使用したJavaScript自動化の概要
公開: 2022-03-11Web開発者として、同じ退屈なタスクを何度も繰り返すことに気付くことがあります。 ビルドコマンドを実行するか、ブラウザで更新を押すことによってどれだけの時間が無駄になるかを考えると、多くの時間を節約できることがわかります。 さらに、プロセスを自動化することで、一時的に「ゾーン」（生産性の状態）を離れることなく、目前のタスクに集中できます。
このJavaScript自動化チュートリアルでは、Gulpを使用して設計および開発プロセスを自動化する方法を学習します。 あなたがよりデザイン志向であるならば、私はあなたが持っているどんな恐れも克服して読むことをあなたに勧めます。 一方、開発者の場合は、その背後にあるロジックを理解すれば、これを一掃することができます。
Gulpは、Node.jsのストリームを使用して、自動化への非同期の送信元と宛先のアプローチを実装するビルドシステムです。 すべてがJavaScriptで記述されているため、中級のコーディング知識を持っている人なら誰でも簡単に始めることができます。 Gulpビルドプロセスは、ウォッチャーとタスクのコレクションで構成されています。 さらに、Gulpの背後にあるコミュニティは、npm内に巨大なプラグインディレクトリを維持しており、JavaScriptの連結からSVGからのアイコンフォントの作成まで、あらゆるタスクを実行するのに役立ちます。
Gulpの代替品
そこにはたくさんの選択肢があり、そのほとんどは過去数年で生まれました-最も注目すべきものはGruntです。 GulpとGruntのコンテストでは、どちらも長所と短所があるため、明確な勝者はありません。そのため、深く掘り下げることは避けます。 一言で言えば、Gruntが構成に大きく依存していることが、GulpのJavaScriptアプローチに人々を導くものです。 その間に、コアラなどのネイティブGUI実装は、主にコーディングに取り掛かることを差し控える人々から、ある程度の基盤を築きました。 ただし、バンドルされたアプリケーションでは、Gulpが提供するカスタマイズ性と拡張性のレベルに到達することは不可能です。
プロセス自動化の基礎
プラグイン
プラグインは、gulpが各プロセスを実行するための手段です。 プラグインはnpmを介してインストールされ、「require」を使用して開始されます。
タスク
Gulpの場合、タスクには常にソースと宛先があります。 それらの間に、各プラグインを呼び出し、変換された結果を次のパイプに出力するパイプがあります。
グロブ
グロブは、ファイルを参照するワイルドカードパターンです。 グロブまたはグロブの配列は、タスクソースの入力として使用されます。
ウォッチャー
ウォッチャーは、ソースファイルの変更を監視し、変更が検出されるたびにタスクを呼び出します。
gulpfile.js
これは、「gulp」コマンドが指すJavaScriptファイルです。 これには、タスクからウォッチャー、またはタスクで使用されるその他のコードまで、すべてが含まれています。
簡単なタスク
開始するには、Node.jsと管理者アクセス権を持つコマンドラインシェルが必要です。 ここからNode.jsをダウンロードできます。 インストールしたら、次のコマンドを実行して、npmが最新であることを確認できます。
sudo npm install npm -g-gフラグは、インストールがグローバルになることを示します。
これで、Gulpをインストールして、いくつかの簡単なタスクの呼び出しを開始する準備が整いました。 次のコマンドを使用して、Gulpをグローバルにインストールします。
sudo npm install gulp -g同じコマンドを使用して更新することもできることに注意してください。
toptal-gulp-tutorial / step1から、最初のタスクに役立つスターターキットをダウンロードできます。 これには、SCSSファイルをCSSにコンパイルする非常に単純なタスクが含まれています。 libsassを採用したgulp-sassプラグインを使用しています。 ここでlibsassを選択したのは、Rubyの代替手段よりもはるかに高速であるためですが、機能の一部が欠けています。 プロジェクトのルートディレクトリに移動したら、次のコマンドを使用して、必要なすべてのプラグインをインストールできます。
npm installこのコマンドはpackage.jsonファイルを読み取り、必要なすべての依存関係をインストールします。 ここでは、以下の省略形として「npminstall」を使用しています。
npm install gulp --save-dev npm install gulp-sass --save-dev「–save-dev」フラグは、選択したプラグインをpackage.json devDependenciesに追加します。これにより、次にすべてをインストールするときに、便利な「npminstall」を使用できます。
この時点で、最初のタスクを実行できます。 次のコマンドを実行し、/scssフォルダー内のすべてのSCSSファイルが対応するディレクトリのCSSにコンパイルされるのを確認します。
gulp scssこの例では、実行するタスクを指定していることに注意してください。 タスク名を省略した場合、「default」という名前のタスクが実行されます。
コードウォークスルー
上記は、わずか7行のJavaScriptコードで実行されます。 確かに、それの単純さを理解すれば、あなたはくつろいだ気分になるでしょう：
var gulp = require('gulp'); var scss = require('gulp-sass');最初に、使用するすべてのプラグインを初期化します。 Gulpは私たちがなくてはならない唯一のものです：
gulp.task('scss', function() {「scss」という名前のタスクを定義します。
return gulp.src('scss/*.scss')タスクのソースファイルを設定します。 これらはグロブとして定義されます。 この例では、「。scss」で終わる「scss/」フォルダー内のすべてのファイルを参照しています。
.pipe(scss())この時点で、以前に定義したgulp-sassプラグインを呼び出します。
.pipe(gulp.dest('css'));最後に、「gulp.dest」を使用して、ファイルの宛先フォルダーを定義します。 ファイルが連結されている場合、これは単一のファイル名になることもあります。
このプロセス自動化の実装をさらに改善するために、他のいくつかのGulpプラグインを含めることを試みることができます。 たとえば、gulp-minify-cssを使用してタスクの最終製品を縮小し、gulp-autoprefixerを使用してベンダープレフィックスを自動的に追加したい場合があります。
ウォッチャーの採用
すぐに使えるウォッチャースターターキットを作成しました。 toptal-gulp-tutorial/step2からダウンロードできます。 これには、以前に作成されたSCSSタスクの拡張バージョンと、ソースファイルを監視してタスクを呼び出すウォッチャーが含まれています。 起動するには、次のコマンドを使用します。
gulpこのコマンドは、ウォッチャーを開始する「デフォルト」タスクを開始します。 この時点で、任意のSCSSファイルを編集して、CSSファイルが再コンパイルされるのを見ることができます。 コマンドラインでGulpの通知を確認できます。
コードウォークスルー
3行のコードを追加するだけで、タスクのウォッチャーを設定しました。 とはいえ、ウォッチャースターターキットは紹介例と大差ありません。 このセクションでは、すべての追加と変更について説明します。
return gulp.src(['scss/**/*.scss', '!scss/**/_*'])この例では、Gulpソースにグロブの配列が提供されています。 1つ目は、サブフォルダー内の「.scss」で終わるすべてのファイルを含み、2つ目は、「_」で始まるファイルを除外します。 このようにして、SCSSの組み込み関数@importを使用して、_page.scssファイルを連結できます。
gulp.task('default', ['scss'], function() {ここでは、「デフォルト」タスクを定義します。 「scss」タスクは、「default」の前に依存関係として実行されます。
gulp.watch('scss/**/*.scss', ['scss']);最後に、Gulpの監視関数を呼び出して、「。scss」で終わるファイルをポイントし、変更イベントが発生するたびに「scss」タスクを実行します。
これで、JavaScriptの連結、コードのヒント、CoffeeScriptのコンパイルなど、他の自動化されたプロセス用の新しいウォッチャーを作成する準備が整いました。 このJavaScript自動化の実装をさらに深く掘り下げるために、タスクの実行時に通知するgulp-notifyを追加することを提案します。 また、別のタスクを作成して、結果のCSSコードを縮小し、「scss」タスクをその依存関係として実行することもできます。 最後に、gulp-renameを使用して、結果のファイルに「.min」サフィックスを追加できます。
JavaScript自動化のための高度なGulpプラグイン
Gulpのプラグインベースには何千ものプラグインがあり、そのうちのいくつかはビルドプロセスの単純なJavaScript自動化をはるかに超えています。 ここにいくつかの優れた例があります：
BrowserSync
BrowserSyncはCSS、JavaScriptを挿入し、変更が加えられるたびにブラウザーを自動的に更新します。 さらに、同僚を怖がらせたり、ブラウザのテストを大幅に高速化するために使用できるghostMode機能が含まれています。
Browserify
Browserifyは、アプリケーションの「require」呼び出しを分析し、バンドルされたJavaScriptファイルに変換します。 また、ブラウザコードに変換できるnpmパッケージのリストがあります。
Webpack
Browserifyと同様に、Webpackは依存関係のあるモジュールを静的ファイルに変換することを目的としています。 これは、モジュールの依存関係をどのように設定するかについてユーザーに自由度を与え、Node.jsのコードスタイルに従うことを目的としていません。
カルマ
Gulp-karmaは、悪名高いテスト環境をGulpにもたらします。 Karmaは、Gulpも推奨している最小の構成アプローチに従います。
結論
このプロセス自動化チュートリアルでは、Gulpをビルドツールとして使用することの美しさとシンプルさを示しました。 チュートリアルで説明されている手順に従うことで、将来のプロジェクトとレガシープロジェクトの両方でソフトウェア開発プロセスを完全に自動化する準備が整います。 古いプロジェクトのビルドシステムのセットアップに時間を費やすと、将来の貴重な時間を確実に節約できます。
近日公開されるより高度なGulpチュートリアルにご期待ください。