Windows10にGulpをインストールしてPugを使う。

#構築理由
今まで「Gulp」や「Pug」を使ったことが無いので、開発環境を構築してみました。
最終的には、Macで構築しますが、まずはWindowsで。

#参考サイト
[開発しやすい環境の作り方~Web系~](https://qiita.com/ferretdayo/items/47937cfb38babcf17a20)

#環境
- Windows10 64bit

#構築手順
参考サイト様と同じ手順で進めていきます。

##１．フォルダ構成を決める
参考サイト様と同じ内容で、構築してみます。

```text:
root/
 ├ js/
 |  └ index.js
 ├ css/
 |  └ style.css
 ├ img/
 |  └ hoge.png
 ├ sass/
 |  └ style.scss
 ├ pug/
 |  └ index.pug
 ├ node_modules
 ├ package.json
 ├ gulpfile.js
 └ index.html
```

##２．Node.jsをインストールする

**Node.jsとは**
下記の参考サイト様で記載されているように、「Node.jsはサーバーサイドで動くJavascript」で、より正確に言うと「サーバサイドでJavaScriptを実行できるようにしてくれるもの」で、プラットフォームという表現が正しいのだそうです。
[初心者向け！3分で理解するNode.jsとは何か?](https://eng-entrance.com/what-is-nodejs)

一緒にインストールされる「npm」は、パッケージ管理ツールだそうです。
[npm とか bower とか一体何なんだよ！Javascript 界隈の文脈を理解しよう](https://qiita.com/megane42/items/2ab6ffd866c3f2fda066)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/67341/aab50247-e18e-a1a2-2062-a45ff6723972.png)

今回は、8.9.1LTSをダウンロードしました。

ダウンロードしたファイルをクリックすると下記の画面が起動しました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/67341/94dfe5bb-b23d-a173-95e6-2500bf0ee123.png)

Nextボタンをクリック後、同意してさらにNextボタンをクリック。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/67341/d2e97e61-85c0-bc02-f96f-788fea761690.png)

インストール先はデフォルトのままで、Nextボタンをクリック。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/67341/bb98c4df-6341-10ea-feac-f05cedd69cd7.png)

とくに指定もなかったので、カスタムセットアップもデフォルトのままで、Nextボタンをクリック。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/67341/54d24f3c-18e3-2945-a93b-e85bf825ea48.png)

最後の画面が表示されて、Installボタンをクリック。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/67341/9dbaccf7-6239-19b5-d62b-c4513c53b74d.png)

インストール中…
![image.png](https://qiita-image-store.s3.amazonaws.com/0/67341/f2526d35-53e9-0120-d6aa-6a87a95a6c2c.png)

インストール成功しました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/67341/98f690c9-4b6b-b76a-807d-45aacf5eeaab.png)

バージョンを確認します。
コマンドプロンプトを起動し、以下のコマンドを実行し確認する。

```:コマンド
node -v
npm -v
```

nodeは、8.9.1.
npmは、5.5.1
でした。

##３．1で決めたフォルダ構成を構築する

コマンドでも、エクスプローラーからでも良いので、フォルダを作る。

##４．gulpをインストールする

**gulpとは**
参考サイト様でも記載されていますが、以下のタスクを自動化するツールです。
　・CSSやJavaScriptなどのコードの縮小化
　・画像の圧縮
　・ファイル変更時のブラウザのリロード

では、インストール開始。

- package.jsonを作成する為に、以下のコマンドを実行する。[npmとpackage.json](https://qiita.com/Sekky0905/items/452619651cdd950c2271)

```:コマンド
npm init
```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/67341/ebdf1029-4f70-d1e4-dc63-9b7c69800660.png)

入力欄が出てくるそうなのですが、すべてEnterで良いとのことなので、Enter。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/67341/79f91484-13f2-8c43-c57b-40f4d2ef5947.png)

次もEnter。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/67341/f3db230c-0141-2d0f-0bbf-85cee4fdd5f4.png)

またEnter。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/67341/17de20fd-030e-8ef5-cbf2-dd06d2184426.png)

次も。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/67341/b4246926-a017-110a-f9d0-26799ee3200a.png)

次も。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/67341/c4bd2fe3-822c-a9be-7fbb-f376a715d517.png)

次も(いつまで続くのだろう…)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/67341/36ed2e30-089a-53bb-49f0-a6ad8ca0d5cc.png)

(まだ終わらない)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/67341/975aad18-7617-2e67-56a2-cc4a4e50c934.png)

(ちょっと不安)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/67341/9cfe157a-d03a-1ce9-31c3-cfb5f32c3b88.png)

(最後かも)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/67341/50897aa8-e227-14f7-f2ac-b829eadbd35e.png)

(終わった)

- gulpのインストール。以下のコマンドを実行する。

```:インストールコマンド
npm i -g gulp
npm i -D gulp
```

iは、installの略称
-gは、globalにインストール
-Dは、package.jsonのdevDependenciesにバージョン付きで書き込み

package.jsonに書き込みする理由は、「npm i」コマンドでプロジェクトに必要なパッケージ(指定されたバージョン)を自動的にインストールするためだそうです。
これにより、自分以外の人が開発環境を構築する場合も、同じパターン・バージョンで簡単に統一することが出来る。

実行したら、エラーになってしまったので、参考サイト様の解決策２を試してみたら、無事にインストール出来ました。
[プロキシ環境下でElectron開発環境の初期セットアップをするときに困ったこと](https://qiita.com/ota-meshi/items/69ed2333ed2ba0768178)

エラーは違ったのですが、こちらのサイト様でも同じ対応をされてました。[npm install で SSL Error になった時の対処法。](https://blog.yug1224.com/archives/563d9b67bf652a600632d01e)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/67341/a2e2fb4b-9437-ed86-7abb-ad0f27b13620.png)

```
npm config set strict-ssl false
```

インストール後、元に戻しました。

```:コマンド
npm config set strict-ssl true
```
##５．gulp-sassをインストールする
**gulp-sassとは**
sassファイルをcssファイルに変換してくれるモジュール

```:インストールコマンド
npm i -D gulp-sass
```
やっぱり、先ほどと同じエラーになったので、同じ対応をしてから
再インストールしました。

**Sassとは**
[これからはcssはSassで書こう。](https://qiita.com/m0nch1/items/b01c966dd2273e3f6abe)
Sassは「Syntactically Awesome StyleSheet」の頭文字ををつなげたもの。
・CSSをより効率的に書けるようにした言語
・CSSをプログラムっぽく書く(コーディング効率やソースコードの保守性が上がる)
・記法は２種類ある「SASS記法」と「SCSS記法」
##６．gulp-pugをインストールする
**gulp-pugとは**
pugファイルをhtmlファイルに変換してくれるモジュール

```:インストールコマンド
npm i -D gulp-pug
```
**pugとは**
[【Pug】ゴリラでもわかるJade改めPug入門](https://blog.mismithportfolio.com/web/20160326pugbegin)
Pugは、HTMLを書くためのテンプレートエンジン。
ざっくり言うと、HTMLの作成を簡単にしてくれる。
cssにおけるSassみたいなもの。
##７．gulp-plumberをインストールする
**gulp-plumberとは**
sassとpugの変換でエラーが出た場合の強制終了を防止してくれるもの。

```:インストールコマンド
npm i -D gulp-plumber
```
##８．gulp-notifyをインストールする
**gulp-notifyとは**
デスクトップ通知を行う。

```:インストールコマンド
npm i -D gulp-notify
```
##９．browser-syncをインストールする
**browser-syncとは**
ブラウザの起動とファイル変更時にリロードを行う。

```:インストールコマンド
npm i -D browser-sync
```

エラー発生。
原因は、下記の参考サイト様と同じだったので、npmのバージョンを5.0.3に変更
[Windowsのnpm installでfsevents系のパーミッションエラー](https://qiita.com/MasamotoMiyata/items/0fdad60d80687fb01909)

```:コマンド
npm install -g npm@5.0.3
```
再度、インストール！！
今度は出来ました。
##１０．gulpfile.jsを作成して実行
参考サイト様で掲載されている内容通りに入力して「gulpfile.js」作成しました。
(インクルードの部分のエラーが取れなくて…でも動くんだよね。未だになぞです。)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/67341/33de9374-f8a7-9d21-e0c3-1b1593d95923.png)

いざ実行！！と意気込んでコマンドを実行したけれど、うまく動かなくて意気消沈…
xamppを起動し忘れていた事が原因でした。

xampp起動後、再度コマンドを実行して無事に動かすことが出来ました。

```:実行コマンド
gulp
```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/67341/57cece39-0269-6e18-fb18-dfb2fcdfd7da.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/67341/46b066a0-34f5-e80a-1aa6-ec17f33e1619.png)

#まとめ
業務の合間に構築していたので、途中記憶が飛びながらの作業でしたが
最後にブラウザが立ち上がって、scssファイルやpugファイルを更新すると同時にブラウザの表示が
更新されることにとても感動しました！！

今度はこの環境をMacにも構築してみたいと思います。