ioalex / npm-buildit

A website boilerplate that builds via npm scripts ⚡

npm Build It! 🧱

Table of Contents

• npm Build It! 🧱
  • Table of Contents
  • About The Project
  • Features
  • Uses
  • Getting Started
    • Prerequisites
    • Installation
    • Quick Start
  • Usage
  • Roadmap
  • License
  • Contact
  • Acknowledgements

About The Project

A static website boilerplate that builds via npm scripts!

Features

• Renders Nunjucks template files to HTML and plug data supplied from YAML front matter or JSON.
• Minifies HTML.
• Generates sourcemaps for SASS and compiles it to CSS.
• Minifies and autoprefixes CSS.
• Bundles JavaScript modules
• Optimises images, SVGs and fonts.
• Watches for file changes, and automatically recompile build and reload webpages using BrowserSync.
• Lints and fixes your HTML, CSS, SASS, JavaScript, Markdown and Git commits.

Uses

• Nunjucks - to modularise HTML allowing for reusability.
• Eleventy - to render Nunjucks files and templates to HTML
• SASS - to write clean, easy and less CSS.
• PostCSS - to optimise CSS code
• Webpack - to bundle JavaScript modules
• Babel - to use next generation JavaScript, today
• Dotenv - to hide any secrets such as API keys
• Imagemin - to compress image files
• Prettier - to quickly format files.
• ESLint - to find and fix JavaScript errors.
• Stylelint - to find and fix CSS & SASS errors.
• Markdownlint - find and fix errors in your Markdown files.
• HTMLHint - to find and fix HTML errors.
• Commitlint - to lint your Git commit messages.
• Husky - for an easy way to add Git hooks.
• Lint-staged - to run tasks on files that are staged in Git.
• EditorConfig - to define coding styles for editors.

Getting Started

A guide to get up and running... 🏃‍♂️

Prerequisites

Please ensure that you have the following dependencies installed:

• Node.js for packages and scripts
• Git for cloning this repository

Installation

Clone the repository in your project folder:

git clone https://github.com/ioalex/npm-buildit.git

Quick Start

git clone https://github.com/ioalex/npm-buildit.git your-project-name

1. Run npm install to install required files and dependencies - for a list see package.json & package-lock.json.
2. That's it, happy coding!

Usage

See package.json for scripts.

Roadmap

See the open issues for a list of proposed features (and known issues).

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Alex He - @alexheio - [email protected]

Project Link: Link

Acknowledgements

• Nunjucks
• Eleventy
• Webpack
• Babel
• SASS
• Gulp
• HTMLHint
• Prettier
• ESLint
• PostCSS/Autoprefixer