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

5430 ワード
開発準備 gulp 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>