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.

目次

• Quicint
  • 目次
  • 動作確認環境
    • macOS
    • Windows OS
  • Setup
    • Install
    • VS Code必須プラグインのインストール
    • 初期ファイル生成とローカル開発
  • Option
    • 環境設定
    • サイト設定
  • Specification
  • Scripts
    • Basic
    • Lint
  • Directory
  • Pre-installation Plugin
  • Supported browser
  • Licence

動作確認環境

macOS

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

$ node -v
v12.22.9

$ yarn -v
1.22.0

Windows OS

$ 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上の各タスクで利用されます。

詳細を表示する

{
  "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で用いられます。

詳細を表示する

{
  "siteName": "HTML5案件用のボイラープレートQuicit",
  "siteDomain": "https://example.com",
  "sitePath": "/",
  "metaAuthor": "サンプルテキスト",
  "metaAppid": "0123456789",
  "metaTwitterSite": "サンプルテキスト",
  "metaTwitterCreator": "サンプルテキスト",
  "publishFileName": "Quicint",
  "themeColor": "#000",
  "webFontUrl": "https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700"
}

Specification

item	detail
Node.js	>= 12.x
Package manager	yarn
Build system	Gulp v4
Module bundler	webpack
Scripts	TypeScript
CSS design	FLOCSS
Template Engine	EJS
Linter	eslint & stylelint & ejs-lint

Scripts

Basic

# ローカルサーバーの起動と各種ファイルのWatchが可能です。通常はこちらで制作を行います。
yarn serve

# developmentビルドを行います。`dist/`配下に書き出されます。
yarn development

# productionビルドを行います。`dist-production/`配下に書き出されます。
yarn prod

# 各種ファイルをMinifyし.Zipファイルとして指定ディレクトリへ書き出します。書き出しディレクトリはsetting.jsonのpublishDirで指定可能です。
yarn zip

# `src/assets/images/`を正として、再画像圧縮を行います。
yarn resetImg

# `src/**/*.ejs`を正として、再書き出しを行います。
yarn resetEjs

Lint

# stylelint
yarn lint:scss

# eslint
yarn lint:ts

# ejs-lint
yarn lint:ejs

Directory

第2階層までの主要ディレクトリ構造（一部省略）です。 srcディレクトリが作業ディレクトリになり、distディレクトリを出力先として利用します。

詳細を表示する

.
├── .husky/
├── dist/
├── docs/
├── gulpfilejs/
├── src
│   ├── @types
│   ├── assets
│   ├── example
│   ├── inc
│   ├── modules
│   └── index.ejs
├── .editorconfig
├── .eslintignore
├── .eslintrc.json
├── .gitignore
├── .ncurc.json
├── .npmrc
├── .prettierignore
├── .prettierrc
├── .stylelintignore
├── .stylelintrc.json
├── LICENSE
├── README.md
├── define.json
├── gulpfile.js
├── package.json
├── setting-site.json
├── setting.json
├── tsconfig.json
├── webpack.common.js
├── webpack.dev.js
├── webpack.prod.js
└── yarn.lock

Pre-installation Plugin

Plugin	Purpose of use
ress	ress.css
object-fit-images	object-fitPolyfill
picturefill	<picture>Polyfill
sweet-scroll	https://github.com/tsuyoshiwada/sweet-scroll

Supported browser

Browser	Version
Google Chrome	latest
Firefox	latest
Safari(macOS)	latest
IE11	Windows 10 later
Edge(EdgeHTML)	latest
Edge(Chromium)	latest
Safari(iOS)	latest iOS version
Google Chrome(Android)	latest

Licence

MIT