Dat-Asset
Static HTML and Assets Generator
I made this because I do a lot of pre-writing of templates to supply developers with who might be using Twig or something but I end up repeating a lot of code and I like using a template engine to get things done right and keep things tidy. Yes, there are existing tools for doing this sort of thing but I found them to be quite over complex. I recommend installing globally so that your project repo can contain just the things you need and not lots of config guff. It's bare-bones but you can go ahead and user Bower components, SCSS frameworks, node modules, grunt, gulp whatever... to your heart's content.
It's still a work in progress and I accept pull requests and issues over at GitHub.
To install:
npm install -g dat-asset
To use:
dat-asset install
Installing sets up a base set of JS, SCSS, JSON fixtures, images, static assets and Pug templates to modify and generate the static HTML and associated files.
dat-asset build
Building generates a dist directory with individual html pages, minified CSS, JS and compressed images.
dat-asset serve
Serving launches the app in a live reload browser for on-the-go SCSS and template changes.
dat-asset page <name>
The page command adds a new page template and a bare fixture file for modification. Pages extend the base layout by default.
e.g dat-asset page contact
dat-asset module <name> -a, --atomic [stage]
The module command adds a single responsibility mixin and associated SCSS file. Good for managing elements efficiently.
The -a or --atomic option accepts either atom, molecule or organism as per the Atomic Design Pattern and organises modules in a structure accordingly.
e.g dat-asset module header -a organism
dat-asset -h
Shows help:
Usage: dat-asset [options] [command]
Commands:
install Install base project
build Generate HTML and assets
serve Launch app in live reload browser
page <name> Add a new page
module <name> [options] Add a new module (optional atomic structure: --atomic [stage])
Options:
-h, --help output usage information
Project Structure
Projects take on the following default structure:
.
+-- app
| +-- fixtures
| +-- _base.json
| +-- index.pug.json
| +-- images
| +-- scripts
| +-- app.js
| +-- static
| +-- fonts
| +-- lib
| +-- styles
| +-- app.scss
| +-- views
| +-- layouts
| +-- base.pug
| +-- modules
| +-- index.pug
| +-- favicon.ico
+-- dist [build files - add to .gitignore]
| +-- assets
| +-- fonts
| +-- lib
| +-- css
| +-- app.css
| +-- app.min.css
| +-- app.min.css.map
| +-- js
| +-- main.js
| +-- main.min.js
| +-- main.min.js.map
| +-- favicon.ico
| +-- index.html