Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tonik/html-frontend-boilerplate
A modern front-end boilerplate for building fast, organized and standardized web apps or sites.
https://github.com/tonik/html-frontend-boilerplate
boilerplate boilerplate-html es6 nunjucks sass
Last synced: 4 months ago
JSON representation
A modern front-end boilerplate for building fast, organized and standardized web apps or sites.
- Host: GitHub
- URL: https://github.com/tonik/html-frontend-boilerplate
- Owner: tonik
- License: mit
- Created: 2017-10-13T13:37:28.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-07-15T15:28:43.000Z (over 5 years ago)
- Last Synced: 2024-09-27T07:43:27.206Z (4 months ago)
- Topics: boilerplate, boilerplate-html, es6, nunjucks, sass
- Language: JavaScript
- Homepage:
- Size: 104 KB
- Stars: 89
- Watchers: 10
- Forks: 14
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
> This is a template file with instructions about usage of this project. You should fill it accordingly and distribute along with project files.
# Project — HTML Front-end Boilerplate
A modern front-end boilerplate for building fast, organized and standardized web apps or sites.
## Requirements
Make sure you have all these dependencies installed before moving on:
- [Node.js](//nodejs.org/en/)
- [NPM](//www.npmjs.com/)
## Dependencies
Building a project requires a few dependencies, they are needed only during development and should not be installed on production. They will be installed along with your project dependencies when running `npm install` command.
- [Gulp](//gulpjs.com/) - Task runner
- [Nunjucks](//mozilla.github.io/nunjucks/) - Templates engine
- [SASS](//sass-lang.com/) - CSS preprocessor
- [Babel](//babeljs.io/) - JavaScript ES6 to ES5 compiler
- [Rollup](//rollupjs.org/) - JavaScript bundler
- [Stylelint](//stylelint.io/) - CSS/SCSS linter
- [ESLint](//eslint.org/) - JavaScript linter
## Building
Destination files are not kept in the repository. This requires you to run project builder to get the final files. Start by downloading or cloning the project repository to the desired directory.
```bash
# Clone repository to the themes folder.
$ git clone [email protected]:.git
```
Change working directory to cloned one and run following commands.
> Destination files will be outputted to the `public/` directory and it will contain all necessary files.
```bash
# Change directory to the cloned folder.
$ cd
# Install required npm dependences for building a theme.
$ npm install
# Build project for development.
$ npm run dev
# Build project for production (minify CSS, JavaScript, and images).
$ npm run prod
```
## Development
To make development fast and pleasant builder can watch your files and automatically rebuild and refresh your browser.
```bash
# Compile project files and rebuild after changes.
$ npm run watch
```
There are also a few tasks to verify and autoformat source code according to configuration files.
```bash
# Verify the correctness of formatting of SASS and JavaScript.
$ npm run lint
# Run autoformatting of SASS files.
$ npm run sass:fix
# Run autoformatting of JavaScript files.
$ npm run javascript:fix
```
## Workflow around the builder
- Don't change anything in the `public` directory, because it will be overwritten by the builder. This folder is read-only.