構築理由

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

参考サイト

開発しやすい環境の作り方~Web系~

環境

Windows10 64bit

構築手順

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

１．フォルダ構成を決める

参考サイト様と同じ内容で、構築してみます。

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とは何か?

一緒にインストールされる「npm」は、パッケージ管理ツールだそうです。
npm とか bower とか一体何なんだよ！Javascript 界隈の文脈を理解しよう

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

ダウンロードしたファイルをクリックすると下記の画面が起動しました。

Nextボタンをクリック後、同意してさらにNextボタンをクリック。

インストール先はデフォルトのままで、Nextボタンをクリック。

とくに指定もなかったので、カスタムセットアップもデフォルトのままで、Nextボタンをクリック。

最後の画面が表示されて、Installボタンをクリック。

インストール中…

インストール成功しました。

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

コマンド

node -v
npm -v

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

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

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

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

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

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

package.jsonを作成する為に、以下のコマンドを実行する。npmとpackage.json

コマンド

npm init

入力欄が出てくるそうなのですが、すべてEnterで良いとのことなので、Enter。

次もEnter。

またEnter。

次も。

次も。

次も(いつまで続くのだろう…)

(まだ終わらない)

(ちょっと不安)

(最後かも)

(終わった)

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

インストールコマンド

npm i -g gulp
npm i -D gulp

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

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

実行したら、エラーになってしまったので、参考サイト様の解決策２を試してみたら、無事にインストール出来ました。
プロキシ環境下でElectron開発環境の初期セットアップをするときに困ったこと

エラーは違ったのですが、こちらのサイト様でも同じ対応をされてました。npm install で SSL Error になった時の対処法。

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で書こう。
Sassは「Syntactically Awesome StyleSheet」の頭文字ををつなげたもの。
・CSSをより効率的に書けるようにした言語
・CSSをプログラムっぽく書く(コーディング効率やソースコードの保守性が上がる)
・記法は２種類ある「SASS記法」と「SCSS記法」

６．gulp-pugをインストールする

gulp-pugとは
pugファイルをhtmlファイルに変換してくれるモジュール

インストールコマンド

npm i -D gulp-pug

pugとは
【Pug】ゴリラでもわかるJade改めPug入門
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系のパーミッションエラー

コマンド

npm install -g npm@5.0.3

再度、インストール！！
今度は出来ました。

１０．gulpfile.jsを作成して実行

参考サイト様で掲載されている内容通りに入力して「gulpfile.js」作成しました。
(インクルードの部分のエラーが取れなくて…でも動くんだよね。未だになぞです。)

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

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

実行コマンド

gulp

まとめ

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

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