Dat-Asset

Static HTML and Assets Generator

GitHub | npm

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