はじめに

フロントエンドエンジニアとして働き始めたばかりの新米エンジニアです。

今回はフロントエンドに必須のタスクランナーであるgulpについてです。

自分自身、gulpをきちんと理解して使用しておらず、勉強しても時間が経過すると忘れると思ったので、今回はメモとして残す意味で、あとは誰かの役に立てば良いな思いながら書いて行こうと思います。

初心者の方、他のタスクランナーからgulpに移行しようと思っている方にも分かりやすく、gulpについて＆環境構築&実践の説明をしていきます。

主な内容

gulpとは
gulpで出来る事
導入までの簡単な流れ
- Node.jsとは
- package.jsonとは
- npmとは
実際に環境構築してみよう
- 1 . Node.jpのインストール
- 2 . package.jsonファイルの作成
- 3 . gulpをインストール
- 4 . gulpfile.jsを作成
準備：package.jsonの編集の仕方
実践：gulpを動かそう！
さいごに

以上の流れで今回は進めていきたいと思います。

フォルダ構成

今回はデスクトップにいファイルを作成しました。

gulp-test
       ├ htdocs/
       │  └ index.html
       │   └ css/
       │      └ style.css
       └ src/
          └ scss/
              └ style.css

gulpとは

フロントエンド開発用のタスクランナーです。(ビルドシステムヘルパーと呼ばれる事もある)
タスクランナーとは、処理(タスク)を自動化で行ってくれるツールです。 gulpにはパッケージが沢山あり、プロジェクトに合わせて実行したい処理を組み合わせる事で、様々なタスクを実行できます。

つまり、普通だったら手間がかかるめんどくさい作業を、自動的に実行してくれるのがgulpと言う事です。

使用したい機能(パッケージ)を選択して導入するだけで、自分でカスタマイズした好きな機能で実装することができるのです。しかも案件ごとに。

なんて素敵なツールなのでしょう。

<参考サイト>
gulpの公式サイト：https://gulpjs.com/
リポジトリ：https://github.com/gulpjs/gulp

※開発の現場では、今回ご紹介するgulpとGruntがよく使用されます。
→gulpとGruntの違いについて詳しく知りたい方は「絶対つまずかないGulp入門」こちらの記事が分かりやすかったのでご参考までに。

gulpで出来る事

では、それほどめんどくさい作業をgulpが行ってくれるのか。
よく使用されるパッケージの例を挙げてみたいと思います。

SassやLESSなどのコンパイル

SassやLESSなどのCSSプリプロセッサ（CSSメタ言語）を自動的にCSSにコンパイルしてくれます。
※コンパイル：ソースコード(プログラミング言語)を、オブジェクトコード(コンピュータが実行可能な形式)に変換する作業
※エディタの拡張機能で、コンパイルを自動的に行ってくれる物もあります。

ベンダープレフィックスの自動付与

IE対策などで使用する、CSSのベンダープレフィックス(-webkit-や-ms-がついたcssコード)を自動的に吐き出してくれます。

<参考記事>
ベンダープレフィックスとは

画像の圧縮

ウェブサイトを表示するロード時間を減らす方法として、画像の圧縮があります。
サイトからの離脱率を減らし、ユーザーに気持ちよくサイトをみてもらう為にも、画像の圧縮は必須です。
手作業でtinypngやtinyjpg、jpegminiでも圧縮する事もできますが、gulpはその作業を自動的に行ってくれます。

CSSやJavaScriptなどのミニファイ

JavaScriptやCSSなどのコードの中の不要な改行、インデントなどを削除し、動作はそのままで圧縮・軽量化してくれます。
これもロード時間を減らす方法として大事な作業です。
※ミニファイ：圧縮,軽量化

ブラウザーシンク

HTML/CSS/JSを保存するたびに、ブラウザをリロードしてくれます。

他にも多くのパッケージがgulpには存在しているので、お好みでカスタマイズして使用できます。

gulpのパッケージが書いてある一覧ページがありましたので、ご参考にどうぞ。
gulp-パッケージ一覧 : https://qiita.com/oreo3@github/items/0f037e7409be02336cb9

導入までの簡単な流れ

gulpを導入するまでの流れ、説明を大雑把にしていきます。

　1 . Node.jsのインストール
　2 . package.jsonファイルを作成
　3 . gulpをインストール

Node.js とは

JavaScriptは本来クライアントサイドで動く言語であり、HTMLで書かれたページに動きをつけたりする。
→Node.jsはサーバサイドで動くJavaScriptである。

package.jsonとは

npmではpackege.jsonというファイルで依存関係のあるパッケージを一括インストールできたり、タスクも管理できる。
必要な設定事項を記述することで、簡単にプロジェクトの管理や環境構築を行うことができるのだ。

npmとは

正式名称は"Node Package Managernpm"と言い、Node.jsのパッケージを管理することができる。
Node.jsをインストールすることで自動的にインストールされます。

環境構築してみよう

次は、実際にコマンドを打ってgulpを使用してみましょう。

1. Node.jsをインストール

こちらのリンクからNode.jsをダウンロードします。
↓
Node.jsの公式サイト
https://nodejs.org/ja/

Windowsの方はこちらからです
↓
Node.jsダウンロードページ
https://nodejs.org/ja/download/

ちなみに、ダウンロードの際は推奨版を入れる事をオススメします！！！
(最新版だとパッケージで対応してない場合がある)

ダウンロードが終わったら、保存されたファイルを解凍して開いてくださいね。

インストールが完了したらターミナルを起動し、以下のコマンドを実行します。

node -v   ・・・Node.jsのバージョンの確認
↓
v12.13.1

自身がダウンロードしたバージョンが表示されたら完了です。

＊余談

ちなみにですが、ターミナルの使用方法は複数あり、

「ターミナル」Macに入ってるアプリケーション
「iTerm2」
エディタ(VScode,Atom,Sublimeなど)

から使用することが多いです。
(私はエディタ:VScodeからがほとんど)

詳細はこちらをご参考にしてください◎

VSCodeでターミナルを起動するショートカット：https://utano.jp/entry/2018/01/visual-studio-code-terminal-window/
Macターミナルは何ができる？初心者向けの使い方と困った時のQ&A：https://www.sejuku.net/blog/4202

2.package.jsonファイルを作成

パッケージをインストールするにあたり、まずはプロジェクトディレクトリ配下にpackage.jsonファイルを準備します。

この記事の冒頭に表記したフォルダ構成のところを参考にしてくださいね。

cdコマンド(=移動する)でプロジェクトのディレクトリの場所まで移動します（パスは適宜変更して下さい）。

cd \Users\{ユーザ名}\Desktop\gulp-test

今回はデスクトップにgulpを導入したいファイル(gulptest)を作成したので、上記のようなパスになりました。

次です。
node.jsをインストールをするとnpmコマンドが使えるようになっています。
package.jsonファイルを作成するために、このコマンドを入力してください。

npm init -y

この表示が出てきたら成功です。

package.json

{"name":"gulp-test","version":"1.0.0","description":"","main":"index.js","scripts":{"test":"echo \"Error: no test specified\"&& exit 1"},"keywords":[],"author":"","license":"ISC"}

-yをつけたことで、設定がデフォルトになりました。

もし、npmをインストール済みであれば、アップデートします。

npm update -g npm

(npmのアップデートはnpm自体で実行)
もし、permissionがなんとか〜〜〜ってエラーが出たら、頭にsudoをつけて実行してみてください！

sudo npm update -g npm

sudoコマンドは、スーパーユーザー:root（や他のユーザ）の権限でコマンドを実行するときに使用します。

わざわざユーザーを切り替えずに、他のユーザーの権限で操作が可能なので、非常に便利で、必殺技みたいな感じです。(乱用禁止)

npmのバージョンも確認してみましょう。

npm -v   ・・・npmのバージョンの確認
↓
6.13.6

3. gulpをインストール

やっと、gulpを導入するところまで来ました。

gulpのダウンロード

npm install -D gulp　　　・・・ローカルインストール
npm install -g gulp　　　・・・グローバルインストール

両方のコマンドを打って導入します。

ローカルインストールはそのプロジェクトのフォルダ内でのみ利用でき、グローバルインストールはそのマシン上のどこからでも利用できるようになるります。
デフォルトはローカルインストールされるようになっており、グローバルインストールしたい場合は-gオプションを付けて実行します。

<参考記事>
gulpのアプローチ "なぜグローバルとローカルにインストールが必要なのか"

node_mosulesというファイルが作成されていたら成功です!!!

先程まではpackage.jsonファイルしかありませんでしたが、
gulを導入したことで、ファイルが3つに増えているかと思います。

　package.json
　node_modules
　package-lock.json

また、package.jsonに記載されてる内容を確認すると
devDependecesという項目が追加されてるかと思います。

jackage.json

{"name":"gulp-test","version":"1.0.0","description":"","main":"index.js","scripts":{"test":"echo \"Error: no test specified\"&& exit 1"},"keywords":[],"author":"","license":"ISC","devDependencies":{"gulp":"^4.0.2"}}

下二行ですね。ちゃんと、インストールしたgulpのバージョンも記載してあります。"gulp": "^4.0.2"

ここまで来たらあと少しです！

4.gulpfile.jsを作成

gulpを使用する準備ができたので、
具体的に実行するタスク内容を設定するgulpfile.jsを他のファイルと同じディレクトリに作ります。

touch gulpfile.js

中身は空ですがgulpfile.jsが作成されたかと思います。
touchはgulpに関係はなく、ターミナルのコマンドでファイルを新規作成するものです。

この時点でディレクトリ内に存在してるファイルは
　
　node_modules
　package-lock.json
　package.json
　gulpfile.js

の4つです。

フォルダの中身を確認してみましょう。

gulp-test
       ├ htdocs...
       ├ src...
       ├ node_modules
       ├ package-lock.json
       ├ package.json
       └ gulpfile.js

desktop配下のgulp-testというファイルの中に、4つのファイルが追加されてるのがわかります。

最後にgulpのバージョンを確認してみましょう。

gulp -v   ・・・gulpのバージョンの確認
↓
CLI version: 2.2.0
Local version: 4.0.2

もし、Localのバージョンが下記のようにUnknownになっていたら

CLI version: 2.2.0
Local version: Unknown

以下のコマンドを入力すれば大丈夫です◎

sudo npm install --save-dev gulp

gulpfile.js内に
以下のコードを入力することで、gulpが使用できるようになります。

gulpfile.js

vargulp=require("gulp");

これで、gulpを使用する一通りの作業はできたと思います。

お疲れ様でした！！！

準備：gulpfile.jsの編集の仕方

コマンドラインで必要なパッケージをインストール

以下のコマンドを使用する事で、パッケージをインストールできます。

npm install --save-dev {パッケージ名}

また、コマンドは以下のように省略することも可能です。

//"install" → "i"
//"--save-dev" → "-D"

npm i -D gulp {パッケージ名}

gulpfile.jsでタスクを作成

package.jsに記入するタスクの書き方の例です。

gulpfile.js

//使うパッケージの宣言var{変数}=require('{パッケージ名}');//個々のタスクgulp.task('{タスク名}',function(){//実行される処理});//watchタスク… タスク名は任意。「gulp.watch()」でファイルの状態を監視・タスク実行gulp.task('watch',function(){gulp.watch('{監視したいファイルのパス}',[{実行するタスク名}]);});//defaultタスク… 「npx gulp」コマンドで実行するタスクを設定gulp.task('default',['{タスク名}','watch']);

地味に大事な余談

パッケージをダウンロードする時のコマンドnpm i -D gulp {パッケージ名}の-Dを実行することで、package.jsonのdevDependenciesインストールしたパッケージ名とバージョンが記録されます。
-Dつけない場合はdependenciesに記録されます。

devDependenciesは主に開発用。(gulpやsassなど)
dependenciesは表側。(jqueryやslickなど)

実践：gulpを動かそう！

では、実際にgulpを動かしてみましょう！
私がいつも使用するのはこれらのパッケージです。

SASSのコンパイル
ベンダープレフィックスを自動的に付与
エラーが原因でタスクが強制停止するのを防止

この3つを行うために必要なgulpfile.jsを書きたいと思います。

まずは、ターミナルに以下のコマンドを実行して、パッケージをインストールします。
※省略した形で書きます。

npm i -D gulp 
npm i -D gulp-sass 
npm i -D gulp-postcss 
npm i -D gulp-autoprefixer 
npm i -D gulp-sass-glob 
npm i -D gulp-csscomb

全部打つのは面倒なので、もっと省略した形があります。
以下のようにパッケージごとに半角で区切って一行にまとめて書くことで、一括インストールすることも可能です。

//npm i -D {パッケージ} {パッケージ} {パッケージ}
//例 ) npm i -D gulp gulp-sass gulp-postcss gulp-autoprefixer gulp-sass-glob gulp-csscomb

実行します。

次に、gulpfile.jsにはタスクの内容を記述します。

gulpfile.js

vargulp=require('gulp');//gulpを使用する宣言varsass=require('gulp-sass');//SASSの使用varpostcss=require('gulp-postcss');varcsscomb=require('gulp-csscomb');//cssを綺麗に並び替えるvarsassGlob=require('gulp-sass-glob');// Sassの@importにおけるglobを有効にするgulp.task('sass',function(){returngulp.src('src/**/*.scss').pipe(sassGlob()).pipe(sass({outputStyle:'expanded'}).on('error',sass.logError)).pipe(postcss([require('autoprefixer')({grid:true}),])).pipe(gulp.dest('htdocs/css/')).pipe(csscomb());});gulp.task('w',function(){gulp.watch('src/**/*.scss',gulp.series('sass'));});

確認：gulpが実行されているか見てみよう！

それでは現在のディレクトリの確認です。
構造はこのようになっているかと思います。

gulp-test
       ├ htdocs/
       │  └ index.html
       │   └ css/
       │      └ style.css
       └ src/
       │   └ scss/
       │       └ style.css
       ├ node_modules
       ├ gulpfile.js
       ├ package.json
       └ package-lock.json

それでは、実際にsassがコンパイルされるか、確認してみたいと思います。
src/scss/style.cssに以下のコードを記入しましょう。

style.scss

.box{display:flex;align-items:center;justify-content:center;color:plum;}.button{transition:0.3s;background-color:grey;color:#000;&:hover{transition:0.3s;background-color:#fff;}}

そして、実行するために、このコマンドを入力します。

gulp w

すると、

htdocs/css/style.cssには見事コンパイルされ、ベンダープレフィックスが付与されたコードになってるかと思います。

style.css

.box{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;color:plum;}.button{-webkit-transition:0.3s;transition:0.3s;background-color:grey;color:#000;}.button:hover{-webkit-transition:0.3s;transition:0.3s;background-color:white;}

command + sで保存する必要もなく、
stylle.scssの内容を変更するだけで自動的にコンパイルされるのもわかるかと思います。

自動的に更新されるのはとても便利ですね。

自分の好きなプラグインを見つけて、オリジナルのgulpを作ってみましょう！

お疲れ様でした！！！

おまけ

今までの流れが、初めてgulpを使用する人に向けた内容です。

一度gulpの環境構築をしたら、
2回目以降は初回と少し違った流れになります。

主に違うのは
①Node.jsをインストールしなくて良い
②nodeとnpmとgulpのバージョンを確認して、必要があればアップデートする
くらいです。

npmのアップデートの時に、npm audit fixというエラーが出る時があるので、
私が以前書いた記事を先に軽く読んで、参考にしていただけると幸いです。

<参考サイト>

昔gulpを使用していたサ大体ここら辺のコマンドを実行したら動きます◎

npm init -y
npm install -D gulp
gulp -v
npm install -D gulp gulp-sass

ご参考までに。

さいごに

gulpの使い方は、なんとなくご理解いただけたでしょうか？
最初は私も訳がわからなかったのですが、最近は使っていくうちに理解できるようになってきました。

フロントエンドは毎年新しい技術が出てくるため追いつくのが大変ですが、がんばっていきましょう><!!!

実践できるか何度も確認して記事にしていますが、間違いや不備等見つけた方がいらっしゃいましたら
ご連絡いただけると幸いです。

参考サイト一覧

https://www.go-next.co.jp/blog/web/soft_tool/13407/#Gulp
https://parashuto.com/rriver/tools/updating-node-js-and-npm
https://ics.media/entry/3290/

はじめに

主な内容

フォルダ構成

gulpとは

gulpで出来る事

SassやLESSなどのコンパイル

ベンダープレフィックスの自動付与

画像の圧縮

CSSやJavaScriptなどのミニファイ

ブラウザーシンク

導入までの簡単な流れ

Node.js とは

package.jsonとは

npmとは

環境構築してみよう

1. Node.jsをインストール

2.package.jsonファイルを作成

3. gulpをインストール

4.gulpfile.jsを作成

準備：gulpfile.jsの編集の仕方

コマンドラインで必要なパッケージをインストール

gulpfile.jsでタスクを作成

地味に大事な余談

実践：gulpを動かそう！

確認：gulpが実行されているか見てみよう！

おまけ

さいごに

参考サイト一覧

Trending Articles