Code Monkey home page Code Monkey logo

quicint's Introduction

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

quicint's People

Contributors

dependabot[bot] avatar higatsubasa-ls avatar tsubasahiga avatar

Stargazers

avatar avatar avatar avatar avatar

Watchers

avatar avatar

quicint's Issues

キャッシュ対策

で用意しているクエリ付与をjs、cssなどの更新でもクエリ変更させるか検討。（※iOS safariのキャッシュクリア対策）

WindowsでZIPタスクがエラーでる件

エラーの内容。

[00:37:59] Finished 'jsBuild' after 8.99 s
[00:37:59] Starting 'genZipArchive'...
[00:37:59] 'genZipArchive' errored after 4.56 ms
[00:37:59] TypeError: dt.toFormat is not a function
    at genZipArchive (c:\Users\HigaTsubasa\Desktop\test\node_modules\quicint\gulpfile.js:358:19)
    at bound (domain.js:419:14)
    at runBound (domain.js:432:12)
    at asyncRunner (c:\Users\HigaTsubasa\Desktop\test\node_modules\quicint\node_modules\async-done\index.js:55:18)
    at processTicksAndRejections (internal/process/task_queues.js:75:11)

gulpfile.jsのこの辺。

const dt = new Date()
const date = dt.toFormat('YYMMDD-HHMI')

swupデフォルト対応

  • headの更新は手動でやったほうが良さそう。
  • headの内容はGAでページ遷移時の検証する

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.