Quicint

Quick initialize HTML5 EJS Boilerplate（すぐできるHTML5 EJSボイラープレート）

Quicint（クイント）は、テンプレートエンジンにEJSを用いたHTML5サイト構築用のボイラープレートです。
ページの量産が比較的簡単にできるため静的構築プロジェクトでの使用に適しています。

Quicint is a boilerplate for building HTML5 sites using EJS as the template engine. It is suitable for use in static building projects as it is relatively easy to mass produce pages.

動作確認環境

macOS

bash
$ sw_vers
ProductName:    macOS
ProductVersion: 12.0.1
BuildVersion:   21A559

$ node -v
v12.22.9

$ yarn -v
1.22.0

Windows OS

bash
$ ver
Microsoft Windows [Version 10.0.22000.469]

$ node -v
v12.22.9

$ yarn -v
1.22.17

Setup

以下の順にセットアップを実施します。

Install

# git clone
git clone https://github.com/TsubasaHiga/Quicint.git your-project
# cd
cd your-project
# install
yarn install

VS Code必須プラグインのインストール

検索欄に@recommendedを入力すると、ワークスペース内で推奨されるプラグインリストが表示されます。それぞれインストールを行ってください。

スクリーンショット

初期ファイル生成とローカル開発

初期ファイルの生成を行い、その後ローカルサーバーを起動します。
この時点で開発可能になり各種ファイルのWatchタスクが始まります。

# Initial file generation
yarn development
# serve
yarn serve

Option

環境設定

環境設定は./setting.jsonにて行なえ、主にGulp上の各タスクで利用されます。

詳細を表示する

json
{
  "browsersync": {
    "browser": "google chrome",
    "server": {
      "baseDir": "./dist"
    },
    "notify": false,
    "open": false,
    "ghostMode": {
      "clicks": false,
      "forms": false,
      "scroll": false
    },
    "port": 3000,
    "https": false,
    "reloadOnRestart": true
  },
  "htmlmin": {
    "collapseWhitespace": false,
    "removeComments": false
  },
  "htmlminProduction": {
    "collapseWhitespace": false,
    "removeComments": true
  },
  "htmlbeautify": {
    "indent_size": 2,
    "preserve_newlines": false
  },
  "pngquant": {
    "quality": [0.6, 0.7],
    "speed": 1,
    "floyd": 0
  },
  "mozjpeg": {
    "quality": 75,
    "progressive": true
  },
  "svgo": {
    "removeXMLNS": true,
    "removeDimensions": true,
    "plugins": [
      {
        "removeAttrs": {
          "attrs": "data.*"
        }
      },
      {
        "removeUnknownsAndDefaults": false
      },
      {
        "removeViewBox": false
      }
    ]
  },
  "gifsicle": {
    "optimizationLevel": 3
  },
  "pngquantManual": {
    "quality": [0.8, 0.9],
    "speed": 1,
    "floyd": 0
  },
  "mozjpegManual": {
    "quality": 95,
    "progressive": true
  },
  "gifsicleManual": {
    "optimizationLevel": 3
  },
  "imageManualLists": ["**/*@2x.{png,jpg,gif,svg}"],
  "publishDir": "Desktop",
  "io": {
    "input": {
      "styles": "src/assets/styles/",
      "images": "src/assets/images/",
      "scripts": "src/assets/scripts/",
      "ejs": "src/"
    },
    "output": {
      "styles": "dist/assets/styles/",
      "images": "dist/assets/images/",
      "scripts": "dist/assets/scripts/",
      "html": "dist/"
    },
    "setting": "./setting.json",
    "siteSetting": "./setting-site.json",
    "define": "./define.json"
  }
}

サイト設定

サイト固有の値を記述するファイルは./setting-site.jsonにて行なえます。
サイト名、metaなどサイト全体で利用する定数などの設置場所として利用可能です。主にEJSで用いられます。