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.
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 watch-
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!
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>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>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.
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.
Compiles the HTML and assets files into the dist directory. This action can also be done by running node index.js.
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.
The configuration object is exported by the 'config/config.js' file.
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>Configuration for the SASS renderer
config.sass.outputStyle: Style of the output CSS files ('nested' | 'expanded' | 'compact' | 'compressed'). Default is 'nested'.
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.