@masatomakino/gulptask-demo-page

v0.10.5

Published

3 months ago

demo html generator for gulp.js

0High
0Medium
0Low

makio_masato

gulptask-demo-page

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

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:

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

Specify the prefix for demo page filenames. Default: demo

--srcDir

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

--distDir

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

--body

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

--style

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

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

--compileModule

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

--compileModuleResolution

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:

tsc --sourceMap

Alternatively, configure your tsconfig.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:

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.