初心者向けの超シンプルなGulpチュートリアル

最近では、ビルドツールの使用はWeb開発ワークフローの不可欠な部分です。

Gulpは、最近（Webpackとともに）最も人気のあるビルドツールの1つです。

しかし、Gulpの学習には明確な学習曲線があります。

最大のハードルの1つは、それに入る一見何百もの異なる部分を理解することです。

それに加えて、コマンドラインですべてを実行する必要があります。これは、コマンドラインをあまり使用していない場合、非常に恐ろしいものになる可能性があります。

このチュートリアルでは、npm（Node Package Manager）の基本と、フロントエンドプロジェクト用のGulpのセットアップについて説明します。

完了すると、ワークフローの設定とコマンドラインの使用に自信が持てるようになります。

では、Gulpの重要な点は何ですか？

Gulpは大幅な時間の節約になります。 Gulpを使用すると、次のような面倒なタスクをコンピューターで処理できるようになります。

• SassファイルをCSSにコンパイルする
• 複数のJavaScriptファイルを連結（結合）する
• CSSファイルとJSファイルを縮小（圧縮）する
• ファイルの変更が検出されると、上記のタスクを自動的に実行します。

Gulpは、上記で説明したタスクよりもはるかに複雑なタスクを実行できます。ただし、このチュートリアルでは、Gulpの基本とその仕組みに焦点を当てます。

これから行うことの概要

このチュートリアルで実行する手順は次のとおりです。

1. Node.jsとnpmをコンピューターにインストールします。
2. プロジェクトに必要なGulpおよびその他のパッケージをインストールします。
3. 必要なタスクを実行するようにgulpfile.jsファイルを構成します。
4. あなたのコンピュータにあなたのためにあなたの仕事をさせてください！ 🙂

上記のすべての用語を完全に理解していなくても心配しないでください。すべてを一度に1ステップずつ説明します。

それでは始めましょう！

環境を設定する

Node.js

コンピューターでGulpを起動して実行するには、Node.jsをローカル環境にインストールする必要があります。

Node.jsは、バックエンドJavaScriptと見なされる「JavaScriptランタイム」として自己記述されています。 GulpはNodeを使用して実行されるため、開始する前にNodeをインストールする必要があります。

Node.jsのWebサイトからダウンロードできます。 Nodeをインストールすると、npmもコンピューターにインストールされます。

npmとは何ですか？

Npm（ノードパッケージマネージャー）

Npmは、世界中の開発者によって作成された、継続的に更新されるJavaScriptプラグイン（パッケージと呼ばれる）のコレクションです。 Gulpはそれらのプラグインの1つです。 （さらにいくつか必要になりますが、これについては後で説明します。）

npmの利点は、コマンドラインに直接パッケージをインストールできることです。手動でWebサイトにアクセスし、ファイルをダウンロードして実行してインストールする必要がないため、これはすばらしいことです。

パッケージをインストールするための基本的な構文は次のとおりです。

npm install [Package Name]

かなり簡単そうですよね？

node_modulesフォルダー

npmパッケージをインストールすると、npmはnode_modulesというフォルダーを作成し、そこにすべてのパッケージファイルを保存することに注意してください。

node_modulesフォルダーを含むプロジェクトがあり、その内容をあえて確認したことがある場合は、ネストされたフォルダーとファイルがたくさん（つまりたくさん）あることに気付いたでしょう。

なぜこれが起こるのですか？

これは、npmパッケージが特定の機能を実行するために他のnpmパッケージに依存する傾向があるためです。これらの他のパッケージは、依存関係と呼ばれます。

プラグインを作成している場合は、既存のパッケージの機能を利用するのが理にかなっています。毎回車輪の再発明をしたいと思う人はいません。

したがって、プラグインをnode_modulesフォルダーにインストールすると、そのプラグインは、必要な追加のパッケージを独自のnode_modulesフォルダーにインストールします。

wazooの外にフォルダをネストするまで、以下同様に続けます。

この時点では、node_modulesフォルダーをいじることについてあまり心配する必要はありません。ただ、そのクレイジーなフォルダーで何が起こっているのかを簡単に説明したかっただけです🙂

package.jsonを使用してパッケージを追跡する

npmのもう1つの優れた機能は、プロジェクトにインストールした特定のパッケージを記憶できることです。

これは、何らかの理由ですべてを再インストールする必要がある場合に重要です。

また、プロジェクトのすべてのパッケージを自分のコンピューターにすばやく簡単にインストールできるため、他の開発者の作業も楽になります。

どのようにしてこれを行うことができますか？

Npmはpackage.jsonというファイルを利用して、インストールしたパッケージとパッケージバージョンを追跡します。また、名前、作成者、Gitリポジトリなど、プロジェクトに関するその他の情報も保存されます。

package.jsonを作成する

このファイルを初期化するには、コマンドラインを再度使用できます。

まず、コンピュータ上のどこにある場合でも、プロジェクトフォルダに移動します。

次に、次のコマンドを入力します：npm init

Npmは、プロジェクトに関する情報を入力するように求めます。ほとんどのオプションでは、Enterキーを押して、括弧内のデフォルト値を使用できます。

完了すると、npmはプロジェクトフォルダーにpackage.jsonファイルを生成します。エディターで開くと、次のように表示されます。

{
  "name": "super-simple-gulp-file",
  "version": "1.0.0",
  "description": "Super simple Gulp file",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/thecodercoder/Super-Simple-Gulp-File.git"
  },
  "keywords": [
    "gulp"
  ],
  "author": "Jessica @thecodercoder",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/thecodercoder/Super-Simple-Gulp-File/issues"
  },
  "homepage": "https://github.com/thecodercoder/Super-Simple-Gulp-File#readme"
}

明らかに、あなたのプロジェクトでは、私がここに持っているものではなく、あなた自身の名前と情報があります。

この時点では、すべてのフィールドが正しくなることを心配する必要はありません。この情報部分は、主にパブリックプラグインとしてnpmに公開されるパッケージに使用されます。

これで、package.jsonファイルに*入れる*のは、Gulpを実行するために必要なすべてのパッケージのリストです。

それらを追加する方法を見てみましょう：

パッケージのインストール

上記の前のセクションでは、npm install [Package Name]の入力について説明しました。

コマンドラインにアクセスして、パッケージをダウンロードしてnode_modulesフォルダーにインストールします。

パッケージがインストールされ、依存関係としてpackage.jsonファイルに自動的に保存されます。

したがって、Gulpをパッケージにインストールする場合は、次のように入力します。npm install gulp

コンピューターがGulpに関連するすべてのものをインストールするのに1〜2分かかる場合があります。警告メッセージが表示される可能性がありますが、インストールが失敗しない限り、警告メッセージについては心配しません。

ここで、package.jsonファイルを開くと、下部にGulpが依存関係として追加されていることがわかります。

"dependencies": {
  "gulp": "^3.9.1"
}

この依存関係のリストは、追加のnpmパッケージをインストールするにつれて大きくなります。

Gulpに必要なその他のパッケージ

当初は、Gulpを使用して、SCSS/CSSファイルやJSファイルのコンパイルなどのタスクを実行したいと考えていました。これを実現するために、次のパッケージを使用します。

• gulp-sass —SassファイルをCSSにコンパイルします
• gulp-cssnano —CSSファイルを縮小します
• gulp-concat —複数のJSファイルを1つの大きなファイルに連結（結合）します
• gulp-uglify —JSファイルを最小化します

前と同じように、これらの行を1つずつ入力して、各パッケージをインストールします。次の行に進む前に、それぞれがインストールされるまで数秒待つ必要があります。

npm install gulp-sass
npm install gulp-cssnano
npm install gulp-concat
npm install gulp-uglify

Gulp-cliとグローバルGulp

以前は、コマンドラインから「gulp」を実行できるようにするには、コマンド「npm install –global gulp」を使用して、ローカルコンピューターにGulpをグローバルにインストールする必要がありました。

ただし、複数のプロジェクトですべて異なるバージョンのGulpが必要な場合は、単一のグローバルバージョンのGulpを使用すると問題が発生する可能性があります。

現在のコンセンサスでは、Gulp自体ではなく、別のパッケージであるGulp-cliをグローバルにインストールすることを推奨しています。

これにより、引き続き「gulp」コマンドを実行できますが、さまざまなプロジェクトでさまざまなバージョンのGulpを使用できます。

そのためのコードは次のとおりです。

npm install --global gulp-cli

興味がある場合は、このツリーハウススレッドの詳細を読むことができます。

さて、すべてのパッケージがインストールされると、必要なすべてのツールが手に入ります。プロジェクトファイルの設定に移りましょう！

ファイル構造を設定する

ファイルとフォルダの作成を開始する前に、ファイル構造を設定する方法がたくさんあることを知っておいてください。使用するアプローチは基本的なプロジェクトには適していますが、「適切な」セットアップは、特定のニーズが何であるかに大きく依存します。

この基本的な方法は、すべての可動部品の基本的な機能を理解するのに役立ちます。その後、セットアップを構築したり、将来的に自分の好みに合わせてセットアップを変更したりできます！

プロジェクトツリーは次のようになります。

• ルートプロジェクトフォルダ
  • index.html
  • gulpfile.js
  • package.json
  • node_modules（フォルダー）
  • アプリ（フォルダー）
  • script.js
  • style.scss
  • dist（フォルダ）

package.jsonファイルとnode_modulesフォルダーについてはすでに説明しました。もちろん、index.htmlファイルはメインのWebサイトファイルになります。

gulpfile.jsファイルは、この記事の冒頭で説明したすべてのタスクを実行するようにGulpを構成する場所です。これについては後ほど説明します。

ただし、ここでは、Gulpワークフローにとって重要な2つのフォルダーappとdistについて説明します。

アプリとdistフォルダ

appフォルダーには、基本的なJavaScriptファイル（script.js）と基本的なSCSSファイル（style.scss）があります。これらのファイルは、すべてのJSおよびCSSコードを書き込む場所です。

distフォルダーは、Gulpが処理した後に最終的にコンパイルされたJSファイルとCSSファイルを保存するためにのみ存在します。 distファイルに変更を加えるのではなく、appファイルのみに変更を加える必要があります。ただし、これらのファイルは、Webサイトでコンパイルされたファイルを使用するため、index.htmlにロードされます。

繰り返しますが、プロジェクトのファイルとフォルダを設定する方法はたくさんあります。心に留めておくべき主な重要なことは、あなたの構造が理にかなっていて、あなたが最も効率的に働くことを可能にするということです。

それでは、このチュートリアルの要点であるGulpの構成に取り掛かりましょう！

Gulpfileを作成して構成する

Gulpfileには、インストールされたパッケージをロードしてさまざまな関数を実行するためのコードが含まれています。コードは2つの基本的な機能を実行します：

1. インストールしたパッケージをノードモジュールとして初期化します。
2. Gulpタスクを作成して実行します。

パッケージを初期化する

プロジェクトに追加したnpmパッケージのすべての機能を利用するには、それらをNodeのモジュールとしてエクスポートする必要があります。 （したがって、フォルダ名は「node_modules」です）

Gulpfileの上部に、次のようなモジュールを追加します。

var gulp = require('gulp');
var cssnano = require('gulp-cssnano');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

パッケージが追加されたので、Gulpfileスクリプトでそれらの関数とオブジェクトを使用できます。また、Node.jsの一部であるいくつかの組み込み関数を使用します。

Gulpタスクを作成する

Gulpタスクの作成は、次のコードを使用して行われます。

gulp.task('[Function Name]', function(){
   // Do stuff here
}

これにより、gulp [Function Name]と入力して、Gulpタスクを実行できます。 コマンドラインに。その後、他のGulpタスクからその名前付き関数を実行できるため、これは重要です。

具体的には、いくつかの異なるGulpタスクを構築しています。これらは、デフォルトのGulpタスクを実行すると*すべて*実行されます。

使用する主な機能のいくつかは次のとおりです。

• .task（）—上記のように、タスクを作成します
• .src（）—特定のタスクでコンパイルするファイルを識別します
• .pipe（）—Gulpが使用しているノードストリームに関数を追加します。同じタスクで複数の関数をパイプ処理できます（florian.ecでこのトピックに関する優れた記事を読んでください）
• .dest（）—結果のファイルを特定の場所に書き込みます
• .watch（）—変更を検出するファイルを識別します

興味がある場合は、Gulpのドキュメントで詳細を確認できます。

準備完了？それでは、ビジネス（ムーラン音楽の合図）に取り掛かり、それらのタスクを書いてみましょう！

これらは、Gulpに実行させたい次のタスクです。

• SCSSをCSSファイルにコンパイルして縮小するSassタスク
• JSファイルを連結して縮小/縮小するJSタスク
• タスクを監視してSCSSまたはJSファイルが変更されたことを検出し、タスクを再実行します
• gulpと入力したときに必要なすべてのタスクを実行するデフォルトのタスク コマンドラインに

Sassタスク

Sassタスクの場合、最初にtask（）を使用してGulpでタスクを作成し、「sass」という名前を付けます。

次に、タスクを実行する各コンポーネントを追加します。まず、src（）を使用して、ソースがapp / scss/style.scssファイルになるように指定します。次に、追加の関数をパイプします。

最初の関数はsass（）関数を実行します（Gulpfileの先頭にある「sass」と呼ばれるgulp-sassモジュールを使用します）。 CSSファイルをSCSSファイルと同じ名前で自動的に保存するため、style.cssという名前になります。

2つ目は、cssnano（）を使用してCSSファイルを縮小します。そして最後は、結果のCSSファイルをdist/cssフォルダーに置きます。

そのすべてのコードは次のとおりです。

gulp.task('sass', function(){
   return gulp.src('app/style.scss')
      .pipe(sass())
      .pipe(cssnano())
      .pipe(gulp.dest('dist/css'));
});

テストするために、style.scssファイルにフィラーSCSSを挿入しました：

div {
    display: block;

    &.content {
        position: relative;
    }
}

.red {
    color: red;
}

gulpと入力すると、コマンドラインで個々のGulpタスクを実行できます。 とタスクの名前。そこで、Sassタスクをテストするために、gulp sassと入力しました。 エラーなしで動作するかどうかを確認し、縮小されたdist/style.cssファイルを生成します。

すべてが正常に機能する場合は、コマンドラインに次のようなメッセージが表示されます。

[15:04:53] Starting 'sass'...
[15:04:53] Finished 'sass' after 121 ms

distフォルダーをチェックインすると、実際にstyle.cssファイルが存在することがわかり、それを開くと、正しく縮小されたCSSが表示されます。

div{display:block}div.content{position:relative}.red{color:red}

これで、Sassタスクは完了です。 JavaScriptに移りましょう！

JSタスク

JavaScript GulpタスクはSassタスクに似ていますが、いくつかの異なる要素があります。

まず、タスクを作成して「js」と呼び、次にソースファイルを特定します。 src（）関数では、いくつかの異なる方法で複数のファイルを識別できます。

1つは、ワイルドカード（*）を使用して、次のように*.js拡張子を持つすべてのファイルを使用するようにGulpに指示することです。

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

ただし、これによりファイルがアルファベット順にコンパイルされるため、他のスクリプトファイルの前に他のスクリプトに依存するスクリプトをロードすることになった場合、エラーが発生する可能性があります。

スクリプトファイルが多すぎない場合は、各JSファイルを手動で指定することで順序を制御できます。 src（）関数は、次のような角かっこを使用して、値の配列をパラメーターとして受け取ることができます。

gulp.src(['app/script.js', 'app/script2.js'])

多くのJSファイルがある場合は、「app / js / plugins」などの別のサブフォルダーに依存関係を保持することで、最初に依存関係をロードするようにすることができます。次に、他のJSファイルを親の「app/js」フォルダーに保存します。

次に、ワイルドカード表記を使用して、すべてのlib（ライブラリ）スクリプトをロードし、その後に通常のスクリプトをロードできます。

gulp.src(['app/js/lib/*.js', 'app/js/script/*.js'])

アプローチは、所有しているJSファイルの数と種類によって異なります。

ソースファイルを設定したら、残りの関数をパイプします。 1つは、ファイルを1つの大きなJSファイルに連結することです。 concat（）関数には、結果のファイルの名前を持つ1つのパラメーターが必要です。

次に、JSファイルを醜くして、保存先の場所に保存します。

JavaScriptタスクの完全なコードは次のとおりです。

gulp.task('js', function(){
    return gulp.src(['app/js/plugins/*.js', 'app/js/*.js'])
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist'));
});

Sassタスクと同様に、gulp jsと入力することで、JSタスクが機能することをテストできます。 コマンドラインに入力します。

[14:38:31] Starting 'js'...
[14:38:31] Finished 'js' after 36 ms

メインの2つのワーカーGulpタスクが完了したので、監視タスクに進むことができます。

タスクを見る

監視タスクは、変更がないか指示したファイルを監視します。変更を検出すると、指定したタスクを実行し、変更を監視し続けます。

2つの監視関数を作成します。1つはSCSSファイルを監視し、もう1つはJSファイルを監視します。

watch（）関数は、ソースの場所と、変更が検出されたときに実行するタスクの2つのパラメーターを取ります。

Sass Watch機能は、アプリフォルダー内のSCSSファイルを監視し、変更を検出した場合はSassタスクを実行します。

関数は次のようになります：

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

JavaScriptウォッチ機能では、「グロビング」と呼ばれる非常に便利なノード機能を利用する必要があります。グロブとは、フォルダおよびサブフォルダの一種のワイルドカードとして「**」記号を使用することを指します。 app / jsフォルダーにJSファイルがあり、app / js / pluginsフォルダーにJSファイルがあるため、JSファイルに必要です。

そして、その関数は次のようになります：

gulp.watch('app/js/**/*.js', ['js']);

glob（“ **”）が機能する方法は、app/jsフォルダー内の任意の場所でJSファイルを検索することです。フォルダ内で直接表示されるか、プラグインフォルダなどの後続の子フォルダで表示されます。 Globbingは便利なので、watch（）関数で各サブフォルダーを個別のソースとして指定する必要はありません。

完全なウォッチタスクは次のとおりです。

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

これでほぼ完了です。作成する最後のタスクは、デフォルトのGulpタスクです。

デフォルトのGulpタスク

デフォルトのGulpタスクは、gulpと入力するだけで実行したいタスクです。 コマンドラインで。タスクを作成するときは、それを「デフォルト」と呼んで、Gulpがそれを実行したいことを認識できるようにする必要があります。

私たちがやりたいのは、SassタスクとJSタスクを1回実行してから、Watchタスクを実行して、ファイルが変更されたときにタスクを再実行することです。

gulp.task('default', ['sass', 'js', 'watch']);

「デフォルト」の名前を再利用しないで、ビルドを実行する他のタスクを作成できます。たとえば、CSSファイルとJSファイルをデフォルトで縮小しないままにしておきたいが、本番用に縮小したいとします。

「minifyCSS」および「minifyJS」と呼ばれるCSSファイルとJSファイルを縮小するための個別のGulpタスクを作成できます。次に、これらのタスクをデフォルトのGulpタスクに追加しませんが、デフォルトのタスクが持つすべてのものと最小化タスクを含む「prod」と呼ばれる新しいGulpタスクを作成できます。

index.html内の参照

Gulpプロセスが機能するようになったら、index.htmlファイルがすべての正しいCSSファイルとJSファイルを参照していることを確認してください。

ここで紹介した例では、CSS参照をdist/style.cssに追加する必要があります。 あなたの<頭>で：

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

そして、dist/all.jsを参照するスクリプトタグを追加します あなたの：

<script src="dist/all.js"></script>

締めくくり

おめでとうございます！この基本的なGulpチュートリアルがお役に立てば幸いです。

冒頭で述べたように、これはnpmとGulpの基本についての非常に簡単なチュートリアルです。

ほとんどの開発者は、Gulpfileに多くの追加タスクを追加します。これらのより高度なトピックに関する別の記事をご覧になりたい場合はお知らせください。

最後に、ここのGitHubアカウントで、このチュートリアルのすべてのコードを確認できます。

このチュートリアルを楽しんだら、気軽に共有するか、下にコメントを残してください！