@masatomakino/gulptask-demo-page
v0.10.1
Published
demo html generator for gulp.js
Downloads
3,110
Readme
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-pageThis 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-pageSee --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
-h, --help
display help for command
npm script
- build : build gulptask-demo-page binary.
- watch : watch src dir and build binary.
- exampleCLI : sample command for CLI user.
- watch:exampleCLI : exampleCLI with watch mode.
- testRun : run "gulptask-demo-page" generated by "build" command.
- watch:testRun : run "gulptask-demo-page" with watch mode.