frontend
v2.0.0-alpha.4
Published
A management system for UI/UX Developers.
Downloads
1,216
Readme
frontend
A boilerplate for UI/UX Developers.
Getting Started
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.
$ touch config.jsonconfig.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
$ mkdir -p ./src/html/_tmpl && touch ./src/html/_tmpl/base.mustachebase.mustache:
<!DOCTYPE html>
<html lang="en">
<head>
<title>{{ pageTitle }}</title>
</head>
<body>
{{> component }}
</body>
</html>Step Three
Create your first HTML page and corresponding JSON file for data.
$ touch ./src/html/index.html ./src/html/index.jsonEvery .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:
<h1>{{ heading }}</h1>How To Build Using Gulp
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.
$ touch gulpfile.jsgulpfile.js:
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
$ gulp --list-tasksRun a task:
$ gulp defaultGo to the Github repo for Mustache to read further information on its usage.