開発準備 gulp＋オートリロード

---
サーバー起動とオートリロード環境を準備する
---

## 開発環境を整備する

- centOS
- vagrant
- node.js
- gulp


1. npm 設定ファイルの作成
2. gulp のインストール
3. gulp 詳細設定

## 1. npm 　設定ファイルの作成
```
npm init
```

必要項目を入力する

```
package name: (study) study
version: (1.0.0)
description: js lesson
entry point: (index.js)
test command:
git repository: https://github.com/YKHSJP/study
keywords:
author:
license: (ISC)
```

package.json が作成される

```
{
  "name": "study",
  "version": "1.0.0",
  "description": "js lesson",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/YKHSJP/study.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/YKHSJP/study/issues"
  },
  "homepage": "https://github.com/YKHSJP/study#readme"
}
```

## 2. gulp をインストール

```
$ npm install gulp --save-dev
```
--save パラメータは、 package.json の `dependencies` という項目に追加される
--save-dev パラメータは、 package.json の `devDependencies` という項目に追加される

package.json 

```
{
  "name": "study",
  "version": "1.0.0",
  "description": "js lesson",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/YKHSJP/study.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/YKHSJP/study/issues"
  },
  "homepage": "https://github.com/YKHSJP/study#readme",
  "dependencies": {},
  "devDependencies": {
    "gulp": "^4.0.2"
  }
}

```

## 3. gulp 詳細設定

サーバーを起動、ファイルの更新でリロードする

```
$ npm i --save-dev browser-sync
```

package.json

```
{
  "name": "study",
  "version": "1.0.0",
  "description": "js lesson",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/YKHSJP/study.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/YKHSJP/study/issues"
  },
  "homepage": "https://github.com/YKHSJP/study#readme",
  "dependencies": {},
  "devDependencies": {
    "browser-sync": "^2.26.7",
    "gulp": "^4.0.2"
  }
}
```

gulpfile.js

1. `gulp` と `browser-sync` を install して
2. 変数 `server` に `browser-sync` を起動する関数を代入
3. 変数 `reload` に `browser-sync` をリロードする関数を代入
4. 変数 `watch` に `gulp.watch` で`'public/*.*'` が変更されたら `reload` を実行するよう代入
5. `gulp.task` に `server` と `watch` を実行するよう設定

```
// -- install package
const gulp = require("gulp");
const browserSync = require("browser-sync");

// -- build server
const server = done => {
  return browserSync.init({
    open: 'external',
    server: {
      baseDir: 'public/',
      index: 'index.html'
    }
  })
  done()
}

// -- reload
const reload = done => {
  browserSync.reload()
  done()
}

// -- watch
const watch = done => {
  gulp.watch(
    'public/*.*',
    gulp.series(reload)
  )
  done()
}

gulp.task("default", gulp.parallel(server,watch))
```

`public/index.html` を用意しておく

```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hello world</title>
  </head>
  <body>
    <p>Nice to meet you.</p>
  </body>
</html>
```

`gulp` を実行

```
$ npx gulp
```

`public/index.html` を修正、上書き保存

```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hello world</title>
  </head>
  <body>
    <p>Nice to meet you.</p>
    <p>me too.</p>
  </body>
</html>
```

![sample1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/644068/34697f72-d715-37d9-2261-5b1f436d6c72.gif)