❤
npm
Sign UpSign In

frontend

2.0.0-alpha.4 • Public • Published

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.json

config.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.mustache

base.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.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:

<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.js

gulpfile.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-tasks

Run a task:

$ gulp default

Go to the Github repo for Mustache to read further information on its usage.

Readme

Keywords

Package Sidebar

Install

npm i frontend

Repository

github.com/danieljackson1983/frontend

Homepage

github.com/danieljackson1983/frontend#readme

Weekly Downloads

281

Version

2.0.0-alpha.4

License

MIT

Unpacked Size

10.1 kB

Total Files

21

Last publish

Collaborators

  • premo
Try on RunKit
Report malware