gulp超入門

##はじめに
<font color="Red">**「この記事を見ればgulpの環境構築の手順が分かる！」**</font>という記事です。

この記事を執筆した理由は「フロントエンドエンジニア目指しています！」という方と話をする中で、gulpやwebpackを知らない方が思ったより多かったからです。

**初めてgulpを触るという方に向けてイチから解説しており、
<font color="Red">環境構築の手順から、実際にSassをCSSにコンパイルするところまで行ないます。**</font>

現場ではgulpやwebpackといったツールを使うことが当たり前なので、この記事でgulpのことを知り、理解を深めるきっかけになれば幸いです。
参考になったらぜひLGTMをお願いします！！

##gulpとは
gulpとはNode.jsで動かすタスクツールです。
一例としては以下のようなひと手間かかる作業を**自動化**することができます。

* Sassのコンパイル
* CSSにベンダープレフィックスを自動で付与
* CSSやJavaScript、画像の圧縮
* ブラウザの自動リロード
* ソースマップの作成

##gulpを導入するメリット
gulpを導入するメリットは色々とありますが、下記の3点はチーム開発においてとても重要なことです。

* **煩雑な処理を自動で行うことができるため、作業を効率的に進められる。**
* **自動化により、人的ミスが減ることで作業時間を短縮できる。**
* **複数人での作業環境を統一することができ、一定の品質を保った開発が可能になる。**

例えばSassのコンパイルは様々な方法があります。

* VSCodeでコンパイル
* ターミナルでコンパイル
* Dreamweaverでコンパイル

複数人で開発する場合、コンパイル方法が人によってバラバラだとコードに差分が生まれ、品質を一定に保つことができません。
gulpやwebpackを使うことで**チーム内でコンパイル方法を統一することができ、品質を一定に保つことが可能**になります。

##インストールの流れ
下記の手順で、イチから説明していきます。

1. Node.jsをインストール
1. npmをインストール
1. gulpのインストール
1. gulpfile.jsのインストール
1. プラグインのインストール
1. タスクの登録
1. コンパイルの実行

##事前準備
この記事で解説しているディレクトリ構成図です。
`gulp_lesson`フォルダ、`src`フォルダ、`sass`フォルダ、`app.scss`ファイルは事前に作成します。
（`gulp_lesson`のフォルダ名はお好きなように変えてください）

```:ディレクトリ構成図
gulp_lesson
 ├ dist
 ├ node_modules
 ├ src 
 │  └ sass
 │     └ app.scss
 ├ package.json
 └ gulpfile.js
```

この記事執筆時点で使用した各パッケージのバージョンです。

|  パッケージ  |  バージョン  |
| :--: | :--: |
|  Node.js  |  12.14.1  |
|  npm  |  6.13.4  |
|  gulp  |  4.0.2  |
|  gulp-sass  |  4.1.0  |

##Node.jsをインストール
まずはNode.jsがインストールがインストールされているか確認します。

```:ターミナル
$ node -v
```

ターミナルでこちらのコマンドを叩いてNode.jsのバージョンが表示されていればインストールされています。
インストールされていない場合はNode.jsの公式サイトからインストールします。

[Node.js公式サイト](https://nodejs.org/ja/ "Node.js公式サイト")

LTS版と最新版がありますが、LTS版をインストールすることをおすすめします。

インストール後に先ほどのコマンドを叩いてバージョンが表示されればインストールは完了です！

##npmをインストール
npmとは「node package manager」の略で、Node.jsのパッケージを管理するためのシステムのことです。
gulpで使うプラグインと考えていただいたら良いでしょう。

[npm公式サイト](https://www.npmjs.com/ "npm公式サイト")

まずはnpmをインストールします。

```:ターミナル
$ npm init
```

以下の内容を入力する必要がありますので適宜変更してください。
（特に指定がなければEnterで進んでください）

1. package name
1. version
1. description
1. entry point
1. test command
1. git repository
1. keywords
1. author
1. license

入力が終わり、`package.json`が作成されていればnpmのインストールは一旦完了です。

##gulpのインストール
次にgulpをインストールします。
今回はグローバルでインストールを行います。

```:ターミナル
$ npm install gulp -g
```

グローバルとローカルの違いは下記の通りです。

* グローバルインストールはそのPC上のどこからでも利用可能
* ローカルインストールはそのプロジェクトのフォルダ内でのみ適用

##gulpfile.jsの作成
次に`gulpfile.js`を作成します。

先ほど作成した`package.json`と同じディレクトリに`gulpfile.js`というファイルを作成し、
`gulpfile.js`を開き、下記のコードを追加します。

```JavaScript:gulpfile.js
var gulp = require("gulp");
```

##gulpでSassをコンパイル
コンパイルとは、プログラムのソースコードをコンピューターが実行可能な機械語に翻訳することです。
gulpでSassをコンパイルしてCSSに変換し、機械が解読できるようにしてみましょう。
今回はScss記法で行います。

まず`sass`フォルダを作成し、`app.scss`を作成しましょう。

Sassファイルの中身はこんな感じで。

```Scss:app.scss
.hoge {
    font-size: 24px;

    &__hoge {
        color: #3399cc;
    }
}
```


##プラグインのインストール
Sassをコンパイルするために必要な`gulp-sass`というプラグインをインストールします。

[npm公式サイト / gulp-sass](https://www.npmjs.com/package/gulp-sass "npm公式サイト / gulp-sass")

```:ターミナル
$ npm i gulp-sass --save-dev
```

こちらを実行すると`package.json`に`gulp-sass`がインストールされていることが確認できます。

```JavaScript:package.json
"devDependencies": {
    "gulp-sass": "^4.1.0"
  }
```

##タスクの登録
プラグインのインストールが終わったら、`gulpfile.js`にタスクの登録をします。

```JavaScript:gulpfile.js
var sass = require("gulp-sass");

gulp.task("sass", function () {
    return gulp
        .src("./src/sass/**/*.scss")
        .pipe(sass().on("error", sass.logError))
        .pipe(gulp.dest("./dist/css"));
});
```

タスクの書き方は先ほど紹介したnpm公式サイトに記載されています。

[npm公式サイト / gulp-sass](https://www.npmjs.com/package/gulp-sass "npm公式サイト / gulp-sass")

タスクの書き方について少し解説しておきます。

* `require('プラグイン名')` → 使用するプラグインを読み込みます
* `gulp.task('タスク名', 実行される処理) ` → タスク名と、実際に行う処理を記述します。
* `gulp.src('取得するファイル')` → タスクの対象となるファイルを取得します。
* `pipe()` → 1つ1つの処理をつなげます。前述のコードでは、`src()`で取得したSassファイルをコンパイルし、それを`gulp.dest()`で書き出しています。`pipe()`メソッドは繋げることができるので、連続した複数の処理を行うことができます。
* `gulp.dest('保存先フォルダー')` → 処理を行ったファイルを指定の場所に保存します

##コンパイルの実行
いよいよコンパイルを行います。
先ほど登録したタスクの`"sass"`という箇所がタスクの名前です。
ターミナルにコマンドを叩いて実行します。

```:ターミナル
$ gulp sass
```

先ほどのSassファイルがコンパイルされてCSSファイルになっているはずです。

```CSS:app.css
.hoge {
  font-size: 24px; }
  .hoge__hoge {
    color: #3399cc; }
```

インデントがズレていたりしますが、オプションを追加すれば変更することもできます。
何度も紹介しているnpm公式サイトに「Options」という箇所があるのでお好みでどうぞ。

[npm公式サイト / gulp-sass](https://www.npmjs.com/package/gulp-sass#options "npm公式サイト / gulp-sass")

##gulp4では関数宣言とexportsが推奨に
本記事執筆時点では、`task()`メソッドによるタスク定義は公式が非推奨とされています。
（一応使えるのですが...）

[[参考] task( ) / gulp.js](https://gulpjs.com/docs/en/api/task/ "参考 / task()")

推奨されているのがタスクごとに関数をつくる方法です。
前述のコードを書き換えたものがこちら。

```JavaScript:gulpfile.js
function SassCompile() {
    return gulp
        .src("./src/sass/**/*.scss")
        .pipe(sass().on("error", sass.logError))
        .pipe(gulp.dest("./dist/css"));
}
exports.default = SassCompile;
```

タスクを実行します。

```:ターミナル
$ npx gulp
```

書き出されたCSSのコード自体は一緒です。

##便利なプラグイン（余談）
gulpを始めたばかりの方向けに便利なプラグインを紹介します。
（こちらの記事では詳細は解説しません。ご容赦ください）

* gulp-sass
* gulp-autoprefixer
* gulp-groupcss-mediaqueries 
* gulp-rename
* gulp-sourcemaps
* browser-sync
* gulp-imagemin
* imagemin-mozjpeg
* imagemin-pngquant

##最後に
最後までご覧いただきありがとうございます。

gulpはwebpackに比べると学習コストが低く、導入しやすいと思いますのでぜひ導入してみてください。

【続編】
[gulpでSassを良い感じにコンパイルする](https://qiita.com/taka-hyt/items/ea0a3c0c88ebbbeb2ea3 "gulpでSassを良い感じにコンパイルする")