Skip to content
Quick initialize HTML5 EJS Boilerplate
CSS HTML JavaScript
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src Merge pull request #47 from TsubasaHiga/develop Dec 5, 2019
.babelrc
.editorconfig
.eslintrc.json
.gitignore
.stylelintrc.json
LICENSE
README.md
env.json.sample
gulpfile.js
package-lock.json
package.json #25 コーディング規約を制定し全ファイルの記述を整えました Dec 4, 2019
setting.json
webpack.config.js
webpack.production.config.js

README.md

Quicint

Quicint

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

Quicint(クイント)はHTML5案件用のボイラープレートです。Percolator(PHP案件用ボイラープレート)をForkし、HTML5版用として個人開発を行っております。テンプレートエンジンはEJSを使用しております。

Install

環境の用意は以下より可能です。

npm package

npm: quicint

npm i quicint

git clone

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

# Init
npm install # or yarn install

Command

コマンドは以下よりご確認下さい。

# serve mode
npm run serve

# publish mode
npm run production

# img recompile task
npm run img

# json file check task
npm run json-check

# lint css
npm run lint:css

# lint fix css
npm run fix:css

# lint js
npm run lint:js

# lint fix js
npm run fix:js

仕様

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

項目 詳細
パッケージマネージャー npm
コンパイル環境、タスクランナー Gulp v4
テンプレートエンジン EJS
CSS トランスパイラ SCSS + Gulp
CSS設計 FLOCSS
JavaScript モジュールバンドラ Webpack
JavaScript ライブラリ Vanilla JS(Pure JS)
JavaScript モジュールバンドラ Webpack
インストールパッケージリスト 参照:package.json
Lint環境 ESlint / Stylelint
.gitignore gitignore.io

フロント側で使用プラグイン

以下プラグインはデフォルトでインストールされています。

プラグイン名 用途
ress reset.css
lazysizes 遅延読み込みプラグイン
object-fit-images object-fitのPolyfill
picturefill <picture>タグのPolyfill
sweet-scroll ページスクロール用プラグイン
swiper スライダー用プラグイン
yakuhanjp 約物半角化用日本語フォント

ディレクトリ構造

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

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

環境依存設定

環境に依存する設定は以下をenv.jsonとしてルートディレクトリに設置することで有効になります。

{
  "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
  },
  "publishDir" : "/Users/higa/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/"
    },
    "env": "./env.json",
    "siteSetting": "./setting.json"
  }
}

サイト設定

サイト固有の値を記述するファイルをsetting.jsonとして用意しております。主に<head>内で用いる内容が記載されており、各案件に合わせて変更してお使いいただければと思います。

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

対応ブラウザ

全て最新バージョンに対応。

ブラウザ名 対応バージョン
Google Chrome 最新
Firefox 最新
Safari(macOS) 最新
IE11 Windows10
Edge 最新
Safari(iOS) 最新iOS
Google Chrome(Android) 最新

Licence

MIT

You can’t perform that action at this time.