gulpへの理解を深め、環境構築をしてみよう！

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

今回はフロントエンドに必須のタスクランナーである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入門」](https://ics.media/entry/3290/)こちらの記事が分かりやすかったのでご参考までに。


# gulpで出来る事

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

#### SassやLESSなどのコンパイル
SassやLESSなどのCSSプリプロセッサ（CSSメタ言語）を自動的にCSSにコンパイルしてくれます。
※コンパイル：ソースコード(プログラミング言語)を、オブジェクトコード(コンピュータが実行可能な形式)に変換する作業
※エディタの拡張機能で、コンパイルを自動的に行ってくれる物もあります。
#### ベンダープレフィックスの自動付与
IE対策などで使用する、CSSの`ベンダープレフィックス`(-webkit-や-ms-がついたcssコード)を自動的に吐き出してくれます。

<参考記事>
[ベンダープレフィックスとは](http://www.htmq.com/csskihon/603.shtml)
#### 画像の圧縮
ウェブサイトを表示するロード時間を減らす方法として、**画像の圧縮**があります。
サイトからの離脱率を減らし、ユーザーに気持ちよくサイトをみてもらう為にも、画像の圧縮は必須です。
手作業で[tinypng](https://tinypng.com/)や[tinyjpg](https://tinyjpg.com/)、[jpegmini](https://www.jpegmini.com/)でも圧縮する事もできますが、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をインストール



<img width="1371" alt="スクリーンショット 2020-01-22 0.05.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/518907/953eccd5-68ae-5b92-b18f-e425874a7db8.png">


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

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


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

ダウンロードが終わったら、保存されたファイルを解凍して開いてくださいね。
<img width="824" alt="スクリーンショット 2020-01-22 0.11.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/518907/d69a91ee-b826-9106-df0e-5b501e5ff8da.png">


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

```
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のアプローチ "なぜグローバルとローカルにインストールが必要なのか"](http://nakajmg.github.io/blog/2014-09-03/gulp-structure.html)

*`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
var gulp = 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
var gulp = require('gulp'); //gulpを使用する宣言
var sass = require('gulp-sass'); //SASSの使用
var postcss = require('gulp-postcss');
var csscomb = require('gulp-csscomb'); //cssを綺麗に並び替える
var sassGlob = require('gulp-sass-glob'); // Sassの@importにおけるglobを有効にする


gulp.task('sass', function(){
return gulp.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というエラーが出る時があるので、
私が以前書いた記事を先に軽く読んで、参考にしていただけると幸いです。

<参考サイト>
https://qiita.com/yurippine/items/e1ac2156b73a5d4098dd

昔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/