JSPM

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

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

Quicint is a boiler for building HTML5 sites using EJS as the template engine. Plate. It is relatively easy to mass produce static pages.

Install

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

# Quicint install
yarn install

※ yarn addでインストールする場合

In the case of `yarn add` installation

# add
yarn add quicint

# cd & find
cd node_module/quicint

Development

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

Generate the initial file generation and start the local server. At this point, it is ready for development and begins the Watch task for the various files.

# init
yarn run development

# serve
yarn run serve

Option

環境設定（setting.json）

環境に依存する設定はsetting.jsonとしてルートディレクトリに設置されています。複数名で開発を行う場合など、開発環境に左右される設定を記述します。設定は主にGulp上の各タスク上で利用されます。

The `setting.json` is a configuration file, located in the root directory as You should write settings which are influenced by the development environment. The settings are mainly used on each task in 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": true,
        "removeComments": true
    },
    "htmlbeautify": {
        "indent_size": 2,
        "preserve_newlines": false
    },
    "pngquant": {
        "quality": [0.7, 0.9],
        "speed": 1,
        "floyd": 0
    },
    "mozjpeg": {
        "quality": 85,
        "progressive": true
    },
    "publishDir": "Desktop",
    "io": {
        "input": {
            "css": "src/assets/css/",
            "img": "src/assets/images/",
            "js": "src/assets/js/",
            "ejs": "src/"
        },
        "output": {
            "css": "dist/assets/css/",
            "img": "dist/assets/images/",
            "js": "dist/assets/js/",
            "html": "dist/"
        },
        "setting": "./setting.json",
        "siteSetting": "./setting-site.json",
        "define": "./define.json"
    }
}

サイト設定（setting-site.json）

サイト固有の値を記述するファイルはsetting-site.jsonとしてルートディレクトリに設置されています。サイト名、metaなどサイト全体で利用する定数などの設置場所として利用可能です。主にEJSで用いられます。

`setting-site.json` describes site-specific values. It can be used as a location for site name, meta and other constants that are used throughout the site. It is mainly used in EJS.

{
    "siteName": "HTML5案件用のボイラープレートQuicit",
    "siteDomain": "https://example.com",
    "metaAuthor": "サンプルテキスト",
    "metaAppid": "0123456789",
    "metaTwitterSite": "サンプルテキスト",
    "metaTwitterCreator": "サンプルテキスト",
    "publishFileName": "Quicint",
    "themeColor": "#000"
}

Spec

Quicintの仕様、及び対応環境は以下の通りです。

Command

Default task

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

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

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

#
# production fullpath
#
# productionビルドを行います。PATH名は`setting-site.json`ファイルの`siteDomain`を用います。
# `publish-fullpath/`配下に書き出されます。
yarn run production:fullpath

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

#
# resetImg
#
# 画像再圧縮（同期）タスクです。
# `dist`配下の画像を一度削除し、`src`を正として再度書き出しを行います。
yarn run resetImg

#
# resetEjs
#
# `dist`配下のHTMLを一度削除し、`src`を正として再度書き出しを行います。
yarn run resetEjs

#
# checkJson
#
# 各種jsonファイルのチェックタスクです。
yarn run checkJson

Lint task

# stylelint
yarn run lint:css

# stylelint fix
yarn run fix:css

# ESLint
yarn run lint:js

# ESLint fix
yarn run fix:js

Directory

第2階層までのディレクトリ構造です。srcディレクトリが作業ディレクトリになり、distディレクトリを出力先として利用します。納品タスクでコピーされるディレクトリもdistになります。

The directory structure up to the 2 level. The `src` directory becomes the working directory and the `dist` directory becomes the output destination. Use. The directory copied by the delivery task is also `dist`.

.
|-- dist #納品ディレクトリ
|   |-- assets
|   |   |-- css/
|   |   |-- fonts/
|   |   |-- images/
|   |   `-- js/
|   |-- page2
|   |-- page3
|   |-- sitemap
|   `-- index.html
|-- src
|   |-- assets
|   |   |-- css/
|   |   |-- images/
|   |   `-- js/
|   |-- inc
|   |-- page2
|   |-- page3
|   |-- sitemap
|   `-- index.ejs
|-- .babelrc
|-- .editorconfig
|-- .eslintrc.json
|-- .gitignore
|-- .stylelintrc.json
|-- define.json
|-- setting.json
|-- setting.json.sample
|-- gulpfile.js
|-- LICENSE
|-- package-lock.json
|-- package.json
|-- README.md
|-- setting-site.json
|-- webpack.config.js
|-- webpack.production.config.js
`-- yarn.lock

Pre-installation Plugin

Supported browser

Licence

MIT