gus

⚒ Command line tool for gus apps.

Prerequisites

• Node.js 8+
• TypeScript 2.7+

Installation

1. git clone git@github.com:ephoton/gus-cli.git
2. cd gus-cli && yarn && tsc && npm link

Usage

• init [type] [name]

  Initialize an app, the type should be [website | spa].

• add [path] [name]

  Add a page(or component).

• build [options]

  Build before deploying.

  -w, --watch Build and watch.

• dev

  Build and watch in development mode. Webpack HMR are active.

• publish

  Publish statics to CDN server or OSS, including js, css and images.

gus app

1. Website app

The directory structure could be like this:

Website
├───dist                # Output files
├───src
│   ├───page            # Pages
│   └───style           # Styles for pages
├───static              # Static files, include images, videos and third-party js
├───view                # Views, entry files for pages
└───config.json         # Config file

Config options:

interface AppConfigInfo {
  outDir: string;             // Dirctory for output files, default is './dist'
  entryDir: string;           // Entry files for pages, default is './src/page'
  server: {
    port: number;             // Port for node server, default is 3000.
    static: string;           // Path for static resources, default is './static'
    view: string;             // Path for views, default is './view'.
  };
}

Skill set required:

React, Scss

2. SPA(Single-page application)

The directory structure could be like this:

SPA
├───dist                # Output files
├───mock                # Path of mock data
├───src
│   ├───page            # Pages
│   ├───style           # Styles for pages
│   └───index.tsx       # The single entry file
├───static              # Static files, include images, videos and third-party js
├───view                # Directory for the single page, view entry for the whole app
├───tsconfig.json
├───tslint.json
└───config.json         # Config file

Config options:

interface AppConfigInfo {
  outDir: string;             // Directory for output files, default is './dist'
  entry: string;              // Path for the entry file, default is './src/index.tsx'
  server: {
    port: number;             // Port for node server, default is 3000
    static: string;           // Path for static resources, default is './static'
    view: string;             // Path for views, default is './view'
  };
  mock: {
    path: string;             // Path for API mock data, default is './mock'
    active: boolean;          // Enable or disable mock data, default is true
  }
}

Mock data schema:

interface MockData {
  path: string;
  method: 'get' | 'post' | 'delete' | 'head' | 'put';
  data: {};
}

For example:

export default [{
  path: '/user/1',
  method: 'get',
  data: {
    success: true,
    code: 123,
    message: '',
    data: {
      id: 1,
      name: 'bob'
    }
  }
}];

Skill set required:

TypeScript, React, Less, Redux

Features

• Hot module replacement support.
• Mock server in development mode.
• Serverless project and app for font-end engineers.
• Fully TypeScript support.