gulpで静的サイトジェネレーター構築

## はじめに

### 修正中のため、正しく動作しません（2021/2/27）

gulpを用いて静的サイトを作る際の導入と方法をまとめる(備忘録)
gulpでは、Node.jsベースのビルドシステムでCSSのコンパイルや画像の圧縮、CSS,JavaScriptの文法チェックを自動実行することができる

※ 構築環境はMacなので、Windowsはわからないですごめんなさい

## gulpの導入

### homebewのインストール

Mac用のパッケージマネージャーです

```terminal:terminal
$ brew -v # このコマンドでバージョンが表示されればすでに導入済みです

```

導入していない場合はターミナルから下記コマンドでインストールします

```terminal:terminal
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

# 上記コマンドはこちらhomebrewのサイトから確認できます
# https://brew.sh/index_ja
```

インストール後は下記コマンドでhomebrewのバージョン確認ができます

```terminal:terminal
$ brew -v
Homebrew 3.0.2
Homebrew/homebrew-core (git revision a2a59b; last commit 2021-02-26)
```

### nodebrewのインストール

まずは```terminal```で以下のコマンドを入力

```terminal:terminal
$ brew install nodebrew
```
表示されるメッセージに従って、パスを通します

まず、バージョン管理用のディレクトリを作ります（表示されるメッセージにしたがっています）

```terminal:terminal
$ /usr/local/opt/nodebrew/bin/nodebrew setup_dirs
```

パスの追加は```~/.bash_profile```に追記することで行えます
```~/.bash_profile```というファイルの「export PATH=~」行より下（ファイルの末尾付近）に以下記述を追加します

```bash:~/.bash_profile
export PATH="$HOME/.nodebrew/current/bin:$PATH"
```
なお、```~/.bash_profile```がない場合は、ターミナルで```touch ~/.bash_profile```として新たに作成して追記してください(詳しくないので自己責任でお願いします)

追記したら、変更を反映させます
ターミナルで以下のコマンドを実行します

```terminal:terminal
$ source ~/.bash_profile
```

Nodebrewのpathが通っているかの確認
pathが表示されればOK

```terminal:terminal
$ which nodebrew
/Users/[username]/.nodebrew/current/bin/nodebrew
```

### Node.jsのインストール

続いてNode.jsをインストールします
nodeのインストール可能なバージョンは下記コマンドで確認できます

```terminal:terminal
$ nodebrew ls-remode
```

今回はバージョン6.9.1を使用するので以下のコマンドでインストールします

```terminal:terminal
$ nodebrew install-binary latest # 最新版
```

インストール済みのバージョンを確認

```terminal:terminal
$ nodebrew list
v6.9.1
```

Node.jsのバージョンを切り替える

```terminal:terminal
$ nodebrew use v6.9.1
```

バージョンの確認

```terminal:terminal
$ nodebrew -v
v6.9.1
```

### Node.jsのパッケージのインストール

作業用のルートフォルダを任意の位置に作成し、terminalでそのフォルダまで移動します
terminalから作業フォルダで以下のコマンドを入力することで、package.jsonを作成します(プロジェクトで使用するパッケージのバージョン情報を管理してくれます)

```terminal:terminal
$ npm init -y
```

### gulpのインストール

```terminal:terminal
$ npm install gulp -D # -DコマンドでdevDependenciesとしてインストール
```

以下のコマンドでバージョンの確認をしてみましょう

```terminal:terminal
$ npx gulp -v
```

次に同フォルダに```glupfile.js```を作成
以下の内容を記述します

```js:gulpfile.js
var gulp = require('gulp')

gulp.task('default', function() {
  // ここにタスクを記述
});
```

gulpはタスクという単位で処理を実行していきます。
必要な処理を適宜追加していきましょう。


### sassの導入

ターミナルに以下のコマンドを入力し、sassの導入に必要なパッケージをインストールします

```terminal:terminal
$ npm install gulp-sass -D
```

ここまででフォルダの構成は以下のようになっています

```terminal:terminal
.(root)
├── gulpfile.js # ファイル
├── node_modules # フォルダ
├── package-lock.json # ファイル
└── package.json #ファイル
```

## サイト生成の自動化を作成する準備

これからhtmlファイルやcss, jsファイルなど、スタイルガイドを作成するために必要なファイルを置いておくためのフォルダを作成していきます
ターミナルから一気に作成していきます(プロジェクトのルートフォルダに移動してください)
以下のコマンドを入力していきます

```terminal:terminal
$ mkdir src
$ mkdir src/sass
$ touch src/sass/style.scss
```

ターミナルから以下のコマンドを入力

```terminal:terminal
$ touch config.js
```

エディタでconfig.jsを開いて以下の記述を追加

```js:config.js
module.exports = {
  build: './build',
  src: '.src',
  sass: './assets/sass'
};
```

さらに`gulp`フォルダ内にて、ターミナルで以下のコマンドを入力します

```terminal:terminal
$ mkdir tasks
$ touch tasks/sass.js
```

tasksフォルダに移動してsassをコンパイルするタスクを記述していきます

エディタでsass.jsを開いて、以下の記述を追加

```js:sass.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var sassGlob = require('gulp-sass-glob');
var config = require('../config.js');
gulp.task('sass', function() {
    return gulp.src(config.src + '/**/*.scss')
        .pipe(sassGlob())
        .pipe(sass({ outputStyle: 'extended' }))
        .pipe(gulp.dist(config.build));
});
```

今のフォルダ構成はこんな感じ

```terminal:teminal
.
├── assets
│   └── scss
│       └── base
│           └── _normalize.scss
├── gulp
│   ├── config.js
│   └── tasks
│       └── sass.js
├── gulpfile.js
├── node_modules
├── package.json
└── src
    └── assets
        └── css
            └── style.scss

```

### sassのコンパイル
エディタで```_normalize.scss```を開きます
以下からcssファイルをダウンロードして、その内容を```_normalize.scss```に記述します
[https://necolas.github.io/normalize.css/](https://necolas.github.io/normalize.css/)
![スクリーンショット 2018-09-19 22.07.31.png](https://qiita-image-store.s3.amazonaws.com/0/132062/f941f0f5-7b37-18bc-0ea2-8b0223432842.png)

次に```./src/assets/css/style.scss```を開いて以下のように記述


```scss:style.scss
// ==============================================================================================
// base
// ==============================================================================================
@import "../../../assets/scss/base/_normalize";
```

### コンパイルしてみる
作業ディレクトリのルートフォルダからターミナルで以下のコマンドを入力

```terminal:terminal
$ npm run sass
```

実行したあと、```./build/assets/css/style.css```が生成されていれば成功です

---
ここから先は加筆中です...

# テンプレートエンジンの導入

Webサイトの主要なパーツを個別に管理することで、保守性・可読性を上げます

## ejsの設定

### タスクの設定

```js:config.js
// モジュールの定義
module.exports = {
  ...
  ejs: './assets/ejs';
}
```

```js:gulp/tasks/ejs.js
var gulp = require('gulp');
var ejs = require('gulp-ejs');
var plumber = require('gulp-plumber');
var config = require('../config.js'); // coufig.jsの読み込み

gulp.task('ejs', function () {
  gulp.src([config.src + '/**/*.ejs', '!' + config.src + '/**/_**/*.ejs', '!' + config.src + '/**/_*.ejs']) // 余計なものは無視する設定
    .pipe(plumber({ // このpipeはよくわからん
      errorHandler: function(err) {
        console.log(err.messageFormatted);
        this.emit('end');
      }
    }))
    .pipe(ejs({}, {}, {ext: '.html'})) // バージョンによって書き方が異なるため注意("gulp-ejs": "^3.2.0")
    .pipe(gulp.dest(config.build));
});
```
```json:package.json
"scripts": {
  ...
  "ejs": "gulp ejs"
},
```

## テンプレートの作成

- ```./assets/```以下に```ejs```フォルダを作成(ここでejsファイルを一元管理します)
- ```ejs```直下に```structures```フォルダを作成し、そのフォルダの中に```_header.ejs```と```_footer.ejs```を作成
- 内容は以下のようにする(とりあえずコンパイルが先)

```html:/ejs/structures/_header.ejs
<header class="st-header" role="banner">
  <div class="st-header__content">
    <div class="st-header__inner">
      ...
    </div>
  </div>
</header>
```

```html:/ejs/structures/_footer.ejs
<footer class="st-ftter" role="contentinfo">
  <div class="st-footer__utility">
    <div class="st-footer__inner">
      ...      
    </div>
  </div>
</footer>
```

- ```ejs```直下に```_template.ejs```を作成、内容は以下

```html:/ejs/_template.ejs
<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <% include ./structures/_header %>
    <main class="st-main" role="main">
      <% st_main() %>
    </main>
    <% include ./structures/_footer %>
    <!-- <script src="./assets/js/ui.js"></script> -->
  </body>
</html>
```

- ```src```フォルダ直下に```index.ejs```ファイルを作成、内容は以下

```html:/etc/index.ejs
<% include ../assets/ejs/_template %>
<% function st_main() { %>
  <div class="c-container">
    <p>コンパイルテスト</p>
  </div>
<% } %>
```

- ```terminal```で以下のコマンドを叩く

```terminal:terminal
$ npm run ejs
```


buildフォルダ直下にindex.htmlが作成されていれば成功(エラーの原因はたいてい構文ミスです、よく確認してみましょう、綴りとか...)