nunjucks-templating-starter

KO | EN

gitlite — search

#javascript #ai #golang #go #rust #deep-learning #linux #macos #java #windows #awesome-list #security #openai #open-source

nunjucks-templating-starter

(★ 14)

Generate and compile static HTML pages using Nunjucks with asset compilation and minification

nunjucks-templating-starter Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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:

views/layouts/master.njk

```jinja
<html>
...
<body>
...
{% block content %}{% endblock %}
...
</body>
</html>
```

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
<html>
...
<body>
...
Giraffes were invented when Chuck Norris laid an uppercut to a horse.
...
</body>
</html>
```

### 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
<html>
<head>
  ...
  <link rel="stylesheet" href="css/main.css">
</head>
<body>
...
<script src="js/main.js"></script>
</body>
...
</html>
```

### 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
<html>
  ...
  <body>
    {{ quote1 }}
    {{ quote2 }}
  </body>
</html>
```

### `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)

nunjucks-templating-starter

nunjucks-templating-starter Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

nunjucks-templating-starter

nunjucks-templating-starter Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README