Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chidiwilliams/nunjucks-templating-starter
Generate and compile static HTML pages using Nunjucks with asset compilation and minification
https://github.com/chidiwilliams/nunjucks-templating-starter
html-templates nunjucks nunjucks-starter-kit nunjucks-templates template
Last synced: about 24 hours ago
JSON representation
Generate and compile static HTML pages using Nunjucks with asset compilation and minification
- Host: GitHub
- URL: https://github.com/chidiwilliams/nunjucks-templating-starter
- Owner: chidiwilliams
- License: mit
- Created: 2018-06-22T08:36:40.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-12-22T19:02:58.000Z (almost 6 years ago)
- Last Synced: 2024-09-22T12:31:16.979Z (5 days ago)
- Topics: html-templates, nunjucks, nunjucks-starter-kit, nunjucks-templates, template
- Language: JavaScript
- Homepage:
- Size: 149 KB
- Stars: 13
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# nunjucks-templating-starter
## About
Use this tool to generate static HTML pages from templates and compiles CSS and JS asset files.
Quickly write HTML for design screens for small projects without building a full frontend app.
Supported by [Gulp](https://github.com/gulpjs/gulp) tasks and [Nunjucks](https://github.com/mozilla/nunjucks) templating engine.
## Table of Contents
1. [Quick Start](#quick-start)
2. [Usage](#usage)
3. [Available commands](#commands)
4. [Configuration](#configuration)
5. [Dependencies](#dependencies)
## Quick Start
To begin:
1. Create new app directory
2. Clone this repository
```bat
git clone https://www.github.com/chidiwilliams/nunjucks-templating-starter
```
3. Install dependencies
```bat
npm install
```
4. Build files and start development server
```bat
npm run watch
```
## Features
1. Generate HTML files quickly with only HTML, CSS and JS
2. Bootstrap and jQuery included
3. CSS and JavaScript minifier
4. SASS compiler
5. Server not required
6. Works out of the box!
## Usage
### HTML
This tool uses the Nunjucks templating engine. To learn more about Nunjucks, visit the [website](https://mozilla.github.io/nunjucks/).
The Nunjucks templates are kept in the `resources/views` directory. Both .njk and .html file extensions are supported for the templates.
Example:
```null
|--views/
|--layouts/
| |--master.njk
|--home.njk
```
views/layouts/master.njk
```jinja
...
...
{% block content %}{% endblock %}
...
```
views/home.njk
```jinja
{% extends 'layouts/master.njk' %}
{% block content %}
Giraffes were invented when Chuck Norris laid an uppercut to a horse.
{% endblock %}
```
The rendered HTML files would be sent to the `dist` directory.
home.html
```html
...
...
Giraffes were invented when Chuck Norris laid an uppercut to a horse.
...
```
### CSS
Place precompiled SCSS files in the `resources/assets/scss` directory. To minify the output CSS, set:
config/config.js
```js
config.sass.outputStyle = 'compressed'
```
After building, the compiled CSS files are sent to the `dist/css` directory.
To import the CSS into a Nunjucks template, link to `dist/css/[FILE_NAME]`. Example:
master.njk
```jinja
...
...
...
```
### JS
Place precompiled JS files in the `resources/assets/js` directory. To minify the output JS, set:
config/config.js
```js
config.sass.outputStyle = 'compressed'
```
After building, the compiled CSS files are sent to the `dist/css` directory.
### Vendor
Put vendor CSS and JS assets in the `resources/vendor/css` and `resources/vendor/js` respectively. During compilation, these assets are directly copied into the `dist` directory without processing.
## Available commands
### `npm run build`
Compiles the HTML and assets files into the dist directory. This action can also be done by running `node index.js`.
### `npm run watch`
Same as above but watches for file changes in the resources directory and recompiles the assets accordingly.
Also, it starts a server at http://localhost:3000/ and syncs your browser with your output files. Great for development.
## Configuration
The configuration object is exported by the `'config/config.js'` file.
### `config.njk`
Configuration for the Nunjucks renderer
`config.njk.templateVars`: Pass in variables here to add them as global variables in your Nunjucks templates.
Example:
config.js
```js
module.exports = {
...
njk: {
...
templateVars: {
quote1: "Chuck Norris can light a fire by rubbing two ice-cubes together.",
quote2: "When Chuck Norris does a push up, he isn't lifting himself up, he's pushing the Earth down.",
}
...
}
...
}
```
home.njk
```jinja
...
{{ quote1 }}
{{ quote2 }}
```
### `config.sass`
Configuration for the SASS renderer
`config.sass.outputStyle`: Style of the output CSS files ('nested' | 'expanded' | 'compact' | 'compressed'). Default is 'nested'.
### `config.js`
Configuration for the JS renderer
`config.js.doCompress`: Determines if the final JS files would be compressed (true | false). Default is false.
`config.js.doKeepSource`: Determines if the .js source file would be included after compression (true | false). Default is false. `config.js.doCompress` must be set to true.
## Dependencies
1. Gulp [GitHub](https://github.com/gulpjs/gulp), [NPM](https://www.npmjs.com/package/gulp), [Website](https://gulpjs.com/)
2. Nunjucks [GitHub](https://github.com/mozilla/nunjucks), [Website](https://mozilla.github.io/nunjucks/)
3. Nodemon [GitHub](https://github.com/remy/nodemon), [NPM](https://www.npmjs.com/package/nodemon), [Website](https://nodemon.io/)
4. Browser Sync [NPM](https://www.npmjs.com/package/browser-sync), [Website](https://browsersync.io)