frontend

    

A boilerplate for UI/UX Developers.


$3

There are several ways to use Frontend. Examples can be found at Github.

##### Step One
A JSON configuration file is used to define the paths for files in order to compile them. The JSON schema should be similar to the example below.

Create a JSON configuration file in the root directory of your project.
``sh
$ touch config.json
`
config.json:
`json
{
"ts": { "dest": "dist/dev/js", "src": "src/ts/*.ts" },
"sass": { "dest": "dist/dev/css", "src": "src/sass/*.scss" },
"less": { "dest": "dist/dev/css", "src": "src/less/*.less" },
"html": { "dest": "dist/dev", "templates": "src/html", "mustache": { "base":"src/html/_tmpl/base.mustache" } }
}
`
> NOTE: It is important to use the keys as described since Frontend does not validate against a JSON schema.

##### Step Two
Create a base Mustache file in the directory defined in the config.json
`sh
$ mkdir -p ./src/html/_tmpl && touch ./src/html/_tmpl/base.mustache
`
base.mustache:
`html






{{> component }}


`

##### Step Three
Create your first HTML page and corresponding JSON file for data.
`sh
$ touch ./src/html/index.html ./src/html/index.json
`

> Every .html file in the _templates_ directory will be parsed as an individual page. The contents of this will be sent through the base template and any partials created. The data comes from a corresponding .json file having the same base name.

index.html:
`html


{{ heading }}


`

$3

Use this package to run your Gulp tasks for compiling Sass, Less, Typescript and Mustache files.

Create a new Gulp file in the root directory of your project.
`sh
$ touch gulpfile.js
`
gulpfile.js:
`javascript
const gulp = require('gulp');
const { build, html, sass, less, ts } = require('frontend');

exports.default = build;
exports["HTML"] = html;
exports["Sass"] = sass;
exports["Less"] = less;
exports["Typescript"] = ts;
`
List the Gulp tasks that are exported from gulpfile.js
`sh
$ gulp --list-tasks
`
Run a task:
`sh
$ gulp default
``
___
> Go to the Github repo for Mustache to read further information on its usage.