quicint

v0.7.5

Published

4 years ago

Quick initialize HTML5 EJS Boilerplate

0High
0Medium
0Low

tsubasahiga

EJS Boilerplate Boilerplate EJS TypeScript

Quicint

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

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

動作確認環境

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

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