❤
npm
Sign UpSign In

quicint

0.7.5 • Public • Published

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

目次

動作確認環境

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

Readme

Keywords

Package Sidebar

Install

npm i quicint

Repository

github.com/TsubasaHiga/Quicint

Homepage

github.com/TsubasaHiga/Quicint#readme

Weekly Downloads

1

Version

0.7.5

License

MIT

Unpacked Size

272 kB

Total Files

172

Last publish

Collaborators

  • tsubasahiga
Try on RunKit
Report malware