chidiwilliams/nunjucks-templating-starter
Generate and compile static HTML pages using Nunjucks with asset compilation and minification
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 tasks and Nunjucks templating engine.
Table of Contents
Quick Start
To begin:
-
Create new app directory
-
Clone this repository
git clone https://www.github.com/chidiwilliams/nunjucks-templating-starter- Install dependencies
npm install- Build files and start development server
npm run watchFeatures
-
Generate HTML files quickly with only HTML, CSS and JS
-
Bootstrap and jQuery included
-
CSS and JavaScript minifier
-
SASS compiler
-
Server not required
-
Works out of the box!
Usage
HTML
This tool uses the Nunjucks templating engine. To learn more about Nunjucks, visit the website.
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
|--home.njk
views/layouts/master.njk
<html>
...
<body>
...
{% block content %}{% endblock %}
...
</body>
</html>views/home.njk
{% 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>
...
<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
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
<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
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
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
<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.