初心者向けのGulp4チュートリアル（SassおよびJSワークフロー）

Gulp 4に関するこのチュートリアルでは、ワークフローでGulpを設定してSassファイルとJavaScriptファイルをコンパイルする方法を段階的に説明します。

Gulpをまだ使用していない場合は、ぜひチェックしてみてください。 Gulpを使用すると、SassファイルのCSSへのコンパイル、JavaScriptファイルの処理、ファイルの最適化など、多くの役立つタスクを実行できます。

Gulpをインストールして実行するための基本的な手順は次のとおりです。このチュートリアルでは、次の手順について説明します。

1. npm install gulp-cli -gを実行して、コマンドラインにgulp-cliをインストールします。 。
2. npm install gulpを実行してGulpをインストールします 。
3. Gulpワークフロー用に他のnpmパッケージをインストールします。
4. gulpfile.jsを作成します プロジェクトルートのファイル。
5. npmパッケージをモジュールとしてgulpfileにインポートします。
6. タスクをgulpfileに追加して、SCSS / JSファイルをコンパイルし、監視タスクを実行します。
7. gulpを実行します すべてのタスクを実行するコマンド。

Gulpとは何ですか？

Gulpは、Web開発ワークフローでさまざまなタスクを実行するツールです。これは、バンドラー、ビルドツール、またはタスクランナーと呼ばれる場合があります。同様のツールはWebpackとGruntです（ただし、Gruntはすぐに時代遅れになりつつあります）。

これがGulpにやらせてもらうことです：

1. SassファイルをCSSにコンパイルします
2. CSSにベンダープレフィックスを追加する
3. 最終的なCSSファイルを縮小する
4. JSファイルを連結（つまり結合）します
5. 最終的なJSファイルをUglifyします
6. 最終的なCSS/JSファイルを/distに移動します フォルダ。

かなりかっこいいですよね？！

つまり、すべての設定とタスクはgulpfile.jsに保存されます。 ファイル。そして、コマンドラインでGulpを実行します。

その大きな部分は、gulpfileをすべて設定すると、他のプロジェクトで簡単に再利用できることです。つまり、大幅な時間の節約になります！

コンピューターへのGulpのインストールとセットアップに移りましょう。

Gulp4のインストール方法

Gulpを実行する前に、いくつかのものをインストールする必要があります。

• まだNode.jsをインストールしていない場合は、インストールします。
• npm install --global gulp-cliを実行して、Gulpコマンドラインユーティリティをインストールします 。

Gulpを動作させたら、Gulpを使用して作成したデモプロジェクトを確認してください。

これはフロントエンドの定型プロジェクトであり、簡単なフロントエンドWebサイトをすばやく開始するための方法です。

（このチュートリアルの残りの部分にもたくさんのコードスニペットがあるので、それらも参照できます！）

フロントエンドボイラープレートプロジェクトを設定するには：

• このプロジェクトのGitリポジトリをクローンするか、コンピューターにダウンロードします。
• プロジェクトを開き、ルートプロジェクトフォルダーでコマンドラインに移動して、npm installを実行します。 。これにより、package.jsonにリストされているnpmパッケージがインストールされます ファイル、特にGulp4。

これで、プロジェクトファイルが設定され、Gulpタスクの実行に使用するすべてのnpmパッケージがインストールされます。

リポジトリからのファイルは準備ができているので、gulpと入力すると コマンドラインに、次のような出力が表示されます。

> gulp
[22:29:48] Using gulpfile ~\Documents\GitHub\frontend-boilerplate\gulpfile.js
[22:29:48] Starting 'default'...
[22:29:48] Starting 'scssTask'...
[22:29:48] Starting 'cacheBustTask'...
[22:29:48] Finished 'cacheBustTask' after 39 ms
[22:29:48] Starting 'jsTask'...
[22:29:48] Finished 'jsTask' after 340 ms
[22:29:48] Finished 'scssTask' after 347 ms
[22:29:48] Starting 'watchTask'...

そして、Gulpを実行しました！

Gulpを実行すると、プロジェクトで何が起こりますか？

了解しました。プロジェクトは正常に機能しています。それでは、プロジェクトの内容とその仕組みについて詳しく見ていきましょう。

まず、プロジェクトのファイル構造の概要を次に示します。

• index.html —メインのHTMLファイル
• package.json — npm installを実行するときにインストールするすべてのnpmパッケージが含まれています 。
• gulpfile.js —構成が含まれ、すべてのGulpタスクを実行します
• / app —作業フォルダ、ここでSCSS/JSファイルを編集します
• / dist —Gulpはここにファイルを出力します。これらのファイルは編集しないでください

ワークフローでは、HTML、SCSS、およびJSファイルを編集します。その後、Gulpは変更を検出し、すべてをコンパイルします。次に、/distから最終的なCSS/JSファイルをロードします index.htmlのフォルダ ファイル。

Gulpが実行されたので、Gulpがどのように機能するかを詳しく見てみましょう。

gulpfile.jsには正確には何が含まれていますか？

gulpfileの各セクションと、その機能について詳しく説明します。

ステップ1：npmモジュールを初期化する

gulpfile.jsの最上部にあります 、require()を使用して、以前にインストールしたnpmパッケージをインポートする定数がたくさんあります。 機能。

パッケージの機能は次のとおりです。

Gulpパッケージ：

• gulp —gulpfile.js内のすべてを実行します。 srcなど、使用する特定のgulp関数のみをエクスポートします。 、dest 、watch 、 その他。これにより、gulpなしでこれらの関数を直接呼び出すことができます。 たとえば、src()と入力するだけです。 gulp.src()の代わりに 。

CSSパッケージ：

• gulp-sourcemaps —ブラウザ開発ツールでCSSスタイルを元のSCSSファイルにマップし直します
• gulp-sass —SCSSをCSSにコンパイルします
• gulp-postcss — autoprefixerとcssnanoを実行します（以下を参照）
• autoprefixer —ベンダープレフィックスをCSSに追加します
• cssnano —CSSを最小化します

JSパッケージ：

• gulp-concat —複数のJSファイルを1つのファイルに連結します
• gulp-uglify —JSを最小化します

また、文字列置換を使用して、index.htmlのCSSおよびJSファイル参照でキャッシュバスティングを実行しています。これにより、ファイルを変更したときに、Webサイトがそれらのファイルの最新のコピーをロードするようになります。

文字列置換パッケージ：

• gulp-replace —キャッシュバストのCSS/JS参照に文字列パラメータを追加します

モジュールが追加されたので、それらを機能させましょう！

ステップ2：モジュールを使用してGulpタスクを実行します

Gulpの「タスク」は、基本的に特定の目的を実行する機能です。

SCSSファイルとJSファイルをコンパイルし、それらのファイルに変更がないかどうかを監視するためのユーティリティタスクをいくつか作成しています。次に、gulpと入力すると、これらのユーティリティタスクがデフォルトのGulpタスクで実行されます。 コマンドラインで。

ファイルパスの定数の作成

ただし、タスクを作成する前に、ファイルパスを定数として保存する数行のコードがあります。これはオプションですが、パス変数を使用するのが好きなので、毎回手動で再入力する必要はありません。

このコードはscssPathを作成します およびjsPath ファイルがどこにあるかをGulpに伝えるために使用する定数。

Sassタスク

Sassタスクのコードは次のとおりです：

function scssTask(){    
    return src(files.scssPath)
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(postcss([ autoprefixer(), cssnano() ]))
        .pipe(sourcemaps.write('.'))
        .pipe(dest('dist')
    );
}

scssTask()と呼ばれるSassタスク 、いくつかのことをしています。 Gulpでは、Gulp関数pipe()を使用して、複数の関数をチェーンできます。 最初の機能の後。

私たちのタスクでは、Gulpは最初にsrc()を実行しています SCSSファイルのソースディレクトリをロードします。以前に作成した定数files.scssPathを使用しています 。

次に、src()の後 他のすべてをビルドプロセスにパイプします。パイプのセクションを既存のパイプに追加するようなものと考えることができます。

実行されている機能は次のとおりです。

• sourcemaps.init() —ソースマップはsrc()の後に最初に追加する必要があります
• sass() すべてのSCSSファイルを1つのCSSファイルにコンパイルします
• postcss() 他の2つのプラグインを実行します：
  • autoprefixer() CSSにベンダープレフィックスを追加するには
  • cssnano() CSSファイルを縮小するには
• sourcemaps.write() 同じディレクトリにソースマップファイルを作成します。
• dest() 最終的なCSSファイルとCSSソースマップファイルを/distに配置するようにGulpに指示します フォルダ。

JSタスク

JSファイルをコンパイルするタスクのコードは次のとおりです。

function jsTask(){
    return src([files.jsPath])
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(dest('dist')
    );
}

jsTask()と呼ばれるJavaScriptタスク 、複数の機能も実行しています：

• src() files.jsPathからJSファイルをロードします 。
• concat() すべてのJSファイルを1つのJSファイルに連結します。
• uglify() JSファイルを拡大/縮小します。
• dest() 最終的なJSファイルを/distに移動します フォルダ。

キャッシュバストタスク

キャッシュバストタスクのコードは次のとおりです。

var cbString = new Date().getTime();
function cacheBustTask(){
    return src(['index.html'])
        .pipe(replace(/cb=\d+/, 'cb=' + cbString))
        .pipe(dest('.'));
}

index.htmlファイルでは、CSSファイルとJSファイルについて次の参照を使用しています。

<link rel="stylesheet" href="dist/style.css?cb=123">

<script src="dist/all.js?cb=123"></script>

キャッシュバストが役立つ理由は、ブラウザとWebホストサーバーがCSSやJSファイルなどのアセットファイルのコピーをキャッシュまたは保存することが多いためです。そのため、同じページを再度読み込むと、サーバーから再ダウンロードするのではなく、ローカルにキャッシュされたコピーをブラウザが読み込む方が速くなります。

問題は、古い保存バージョンをロードしたくない場合があることです。 CSSまたはJSファイルに変更を加えてサーバーに再デプロイする場合は、ユーザーにそれらのファイルの再ダウンロードを強制する必要があります。

したがって、再ダウンロードを強制する1つの方法は、小さなクエリ文字列を追加することです。
?cb=123 それらのファイル参照の最後まで。ブラウザがページをリロードし、クエリ文字列が前回と異なる場合、ファイルが更新されます。

Gulp replace()を使用しています 「cb=」と任意の数値を含む文字列を検索する関数。そして、その数値を、1970年以降のミリ秒に変換された現在の時刻で構成される新しい数値に置き換えます。

そうすれば、Gulpが実行されるたびにクエリ文字列が異なり、新しいCSSファイルとJSファイルがユーザーのブラウザに読み込まれるようになります

Gulp w atch task

Gulp watch() 機能は非常に便利な機能です。実行すると、継続的に実行され、ファイルを監視して変更を検出します。変更を検出すると、指示したタスクをいくつでも実行します。

gulpを手動で実行し続ける必要がないため、これはすばらしいことです。 コードを変更するたびに。

これがGulpウォッチタスクのサンプルコードです：

function watchTask(){
    watch(
        [files.scssPath, files.jsPath],
        parallel(scssTask, jsTask)
    );
}

watch() 関数は3つのパラメーターを取りますが、使用しているのは2つだけです：

• グロブ、ファイルパス文字列を意味します
• オプション（未使用）、および
• タスク、つまり実行するタスクを意味します。

監視タスクで実行しているのは、scssPath内のファイルを監視することです。 およびjsPath ディレクトリ。次に、いずれかに変更が加えられた場合は、scssTaskを実行します。 およびjsTask 同時にタスク。

ユーティリティタスクを設定したので、メインのGulpタスクを設定する必要があります。

デフォルトのGulpタスク

これはメインのGulpタスクであり、gulpと入力すると自動的に実行されます コマンドラインで。

exports.default = series(
    parallel(scssTask, jsTask), 
    watchTask);

Gulpは自動的にdefaultを検索します gulpfile.jsのタスク gulpを使用する場合 指図。したがって、デフォルトのタスクを機能させるには、デフォルトのタスクをエクスポートする必要があります。

デフォルトのタスクは次のことを行います：

• scssTaskを実行します およびjsTask parallel()を同時に使用する
• 次に、watchTaskを実行します

また、これらすべてのタスクをseries()内に配置していることにも気付くでしょう。 機能。

これは、Gulp 4でのタスクの処理方法に関する主要な新しい変更の1つです。すべてのタスク（単一のタスクも含む）をseries()でラップする必要があります。 またはparallel() 。

Gulp4での変更

tasks()を使用している場合 すべてを実行する機能を使用すると、違いがあることに気付いたかもしれません。

gulp.task()を使用する代わりに すべてのタスク関数を含めるために、scssTask()のような実際の関数を作成しています およびwatchTask() 。

これは、タスクを作成するためのGulpの公式ガイドラインに従うことです。

Gulpチームは、exportsの使用を推奨しています tasks()ではなく ：

したがって、task()を使用することはできますが 関数の場合、タスクごとにJS関数を作成してから、それらをエクスポートする方が最新です。可能であれば、これを反映するように構文を更新することをお勧めします。Gulpがtask()を非推奨にする可能性があるためです。 ある時点で。

Gulp 3から移行する際の問題？

Gulp 3を使用していて、Gulp 4で動作させることだけが必要な場合は、幸運です！

主な重大な変更には、タスクの実行方法が含まれます。

Gulp 4には、タスクを実行するための2つの新しい関数が導入されています。series() およびparallel() 。複数のタスクを同時に実行するか、次々に実行するかを選択できます。

以前は、Gulp 3では、単一の関数または複数の関数を配列にリストするだけで済みました。ただし、Gulp 4では、series()のいずれにもラップせずにこれを実行します。 またはparallel() エラーがスローされます。

次のようなもの：

AssertionError [ERR_ASSERTION]: Task function must be specified

これをすばやく修正する方法は次のとおりです。

（古い）Gulp3構文のタスク

Gulp 3では、次のようにタスクを実行した可能性があります。

gulp.task('default', ['sass', 'js', 'watch']);
gulp.watch('app/scss/*.scss', ['sass']);

Gulp4構文のタスク

これらのタスクを次のようなseries（）関数に入れます：

gulp.task('default', gulp.series('sass', 'js', 'watch'));
gulp.watch('app/scss/*.scss', gulp.series('sass'));

そして、それは可能な限り最小の変更でタスク関数エラーを修正します！ 🙂

プロジェクトファイルのダウンロード

ここに表示したすべてのコードは、フロントエンドボイラープレート用に持っているGitHubリポジトリからのものです。これは、単純なフロントエンドWebサイトプロジェクトのクイックスターターキットとして意図されています。

ぜひチェックして、カスタマイズして、自分のプロジェクトに使用してください。

ここでGitHubリポジトリを確認してください。