Package Exports

quicint
quicint/src/assets/scripts/main.ts

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (quicint) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.

Install

# git clone
git clone git@github.com/TsubasaHiga/Quicint.git name-of-your-project
yarn install

# install with yarn
yarn add quicint
cd node_module/quicint

husky Install

yarn husky install
yarn husky add .husky/pre-commit "lint-staged"

yarn使用の場合のみ.husky/pre-commitを以下に変更します。

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

- lint-staged
+ yarn lint-staged

Setup

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

# Initial file generation
yarn run development

# serve
yarn run 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",
  "googleFonts": "https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700"
}

Specification

item	detail
Node.js	12.x required
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 run serve

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

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

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

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

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

Lint

# stylelint
yarn run lint:scss

# eslint
yarn run lint:ts

# ejs-lint
yarn run lint:ejs

Pre-installation Plugin

Plugin	Purpose of use
ress	ress.css
object-fit-images	`object-fit`Polyfill
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

quicint