Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Quicint

logo

NPM version NPM downloads

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.

ts sass html5 gulp webpack eslint yarn babel

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

Directory

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

.
├── dist
│   ├── assets
│   │   ├── images
│   │   ├── scripts
│   │   └── styles
│   ├── example
│   │   └── index.html
│   ├── .htaccess
│   ├── index.html
│   └── robots.txt
├── gulpfilejs/
├── src
│   ├── assets
│   │   ├── images
│   │   ├── scripts
│   │   └── styles
│   ├── inc/
│   ├── example/
│   ├── parts/
│   └── index.ejs
├── .babelrc
├── .editorconfig
├── .eslintignore
├── .eslintrc.json
├── .gitignore
├── .npmrc
├── .prettierignore
├── .prettierrc
├── .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