Accelerate HTML5 Project Setup with ELF CLI: Fast Scaffolding and Build Automation

ELF (short for "Elf") is a Node.js CLI designed to simplify the creation and build workflow of HTML5 scene‑marketing projects, offering project scaffolding, template selection, and automated build features.

Quick Start

Installation ELF requires Node >= 4 and can be installed globally via npm. Because of network issues with node-sass and phantomjs , it is recommended to use the Taobao mirrors:

# mac/linux
SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ PHANTOMJS_CDNURL=https://npm.taobao.org/mirrors/phantomjs/ npm install -g elf-cli --registry=https://registry.npm.taobao.org
# windows
npm install -g elf-cli --registry=https://registry.npm.taobao.org --SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ --PHANTOMJS_CDNURL=https://npm.taobao.org/mirrors/phantomjs/

After installation, run elf --help to view available commands.

Project Initialization To start a full‑page vertical‑swipe HTML5 project, use the swiper template:

# Initialize project with swiper template
elf init -t swiper demo-swiper

# Enter directory and install dependencies
cd demo-swiper && npm install

# Start development server (hot reload, automatic style compilation)
elf start

The project runs in development mode with style hot‑loading and other conveniences.

Deployment When development is finished, build the project for production: elf build This generates a dist folder ready for deployment.

The workflow eliminates repetitive initialization and build steps and has been adopted in over ten JD brand H5 projects.

Feature Overview

ELF consists of three main parts: project build, example templates, and common components.

Project Build

ELF is built on webpack and bundles a suite of loaders and plugins, including:

webpack‑dev‑server

sass‑loader, less‑loader, style‑loader

html‑webpack‑plugin

postcss‑loader, autoprefixer, postcss‑plugin‑px2rem, postcss‑sprites, postcss‑assets

image‑webpack‑loader

Various *‑loader utilities

Key capabilities provided are:

Style hot‑loading during development

Automatic compilation of Sass, Less, and Stylus

Autoprefixer for vendor prefixes

px‑to‑rem conversion

Sprite generation

Automatic extraction of image width and height

Image compression on build

Code merging and minification on build

Example Templates

ELF ships with five ready‑made templates:

Base : Minimal project structure for learning the build system.

Swiper : Vertical swipe page using the swiper library.

Switcher : Scene‑switching demo combining swiper and anime.js.

Panorama : 3D panorama example built with three.js and orientation.js, supporting device‑orientation controls.

Video : Basic mobile video playback using the HTML video tag.

These templates allow rapid project bootstrapping, and developers can customize them further.

Common Components

ELF also provides reusable components such as: elf-preloader.js: Preloads images and audio assets. elf-orientation.js: Handles device orientation events.

Conclusion

The project originated from a collection of typical examples, was refactored twice, and draws inspiration from create‑react‑app for its webpack configuration. Future plans include extracting the template module (similar to vue‑cli) and offering a GUI built with Electron.

Users are encouraged to try ELF, report issues, submit pull requests, or fork the repository. The source code is hosted on GitHub.