npm package: @masatomakino/gulptask-demo-page
Description: demo html generator for gulp.js
Author: MasatoMakino
Latest version: 0.10.5

# gulptask-demo-page

> A CLI tool that generates demo HTML pages from specified JavaScript/TypeScript source files.

[![MIT License](http://img.shields.io/badge/license-MIT-blue.svg?style=flat)](LICENSE)
[![npm version](https://img.shields.io/npm/v/@masatomakino/gulptask-demo-page.svg?style=flat)](https://www.npmjs.com/package/@masatomakino/gulptask-demo-page)
[![GitHub](https://img.shields.io/badge/GitHub-Repository-blue?logo=github&style=flat)](https://github.com/MasatoMakino/gulptask-demo-page)
[![build test](https://github.com/MasatoMakino/gulptask-demo-page/actions/workflows/buildJS.yml/badge.svg)](https://github.com/MasatoMakino/gulptask-demo-page/actions/workflows/buildJS.yml)

## Getting Started

### Preparing Demo Source Files

Place your demo source files in the `demoSrc` directory.
File names should have a `demo_` prefix, like `demoSrc/demo_sample.ts`.

### Generating Demo Pages

To generate demo pages, run the following command:

```bash
npx @masatomakino/gulptask-demo-page
```

This command will generate a set of HTML files that load the demo scripts, along with an index page, in the `docs/demo` directory.

## CLI

you can generate demo pages from the CLI.

```
npx @masatomakino/gulptask-demo-page
```

See `--help` command for options.

### Options

#### -W --watch

Enable watch mode. Default: false

#### --prefix <string>

Specify the prefix for demo page filenames. Default: demo

#### --srcDir <path>

Specify the directory containing demo source files. Default: ./demoSrc

#### --distDir <path>

Specify the output directory for generated demo pages. Default: ./docs/demo

#### --body <string>

Specify HTML tags to insert into the body. The specified content will be inserted within the `<body>` tag of the generated HTML.

#### --style <string>

Specify CSS styles to apply to the demo page. The specified styles will be inserted within the `<style>` tag of the generated HTML. Example: "canvas{background-color:#000}"

#### --copyTargets [extensions...]

Specify file extensions to copy. Example: "png", "jpg", "jpeg", "obj". Default: "png", "jpg", "jpeg"

#### --externalScripts [url...]

Specify an array of script file URLs to load from external CDNs. Use this when loading external modules that cannot be bundled via npm. Example: "https://code.createjs.com/1.0.0/createjs.min.js"

#### --rule <path>

Path to the webpack rule configuration file (e.g., `webpack.config.js`). If this option is specified, the specified configuration file will be loaded. If not specified, the default configuration file built into the package will be used.

#### --compileTarget <string>

Corresponds to TypeScript's `tsconfig.compilerOptions.target`. See the official documentation for details. Example: es5

#### --compileModule <string>

Corresponds to TypeScript's `tsconfig.compilerOptions.module`. See the official documentation for details. Example: es2020

#### --compileModuleResolution <string>

Corresponds to TypeScript's `tsconfig.compilerOptions.moduleResolution`. See the official documentation for details. Example: node, node16, bundler

### TypeScript Source Map Configuration

To enable TypeScript source mapping in browser DevTools during watch mode, add the `--sourceMap` flag to your library project's tsc command:

```bash
tsc --sourceMap
```

Alternatively, configure your `tsconfig.json`:

```json
{
  "compilerOptions": {
    "sourceMap": true
  }
}
```

This generates `.js.map` files that allow browser DevTools to map bundled JavaScript back to original TypeScript source files.

### Complete Example

This example demonstrates common CLI options:

```bash
npx @masatomakino/gulptask-demo-page \
  --prefix demo \
  --srcDir ./demoSrc \
  --distDir ./docs/demo \
  --body '<div></div>' \
  --style 'canvas{background-color:#000}' \
  --externalScripts 'https://code.createjs.com/1.0.0/createjs.min.js' \
  --rule ./rule.js \
  --compileTarget es6
```

Add `-W` flag for watch mode.

#### -h, --help

display help for command

## npm script

- build : build gulptask-demo-page binary.
- watch : watch src dir and build binary.
- testRun : run "gulptask-demo-page" generated by "build" command.

## License

[MIT licensed](LICENSE).