ELF - 灵活可扩展的 HTML5 构建工具 | Aotu.io「凹凸实验室」

ELF，意为小精灵，来自 War3 中暗夜精灵族的农民。

通常当我们开始一个新的 HTML5 场景营销活动项目时，需要创建项目目录，初始化基本的项目文件，然后再添加构建（grunt/gulp/webpack）相关的文件（一次两次三次…，像小精灵采木一样~)，
目前有不少工具可以帮我们解决一部分这种重复性的工作，但不能完全的解决，于是，就有了小精灵 - ELF，官网：elf.aotu.io。

快速上手

安装

ELF 支持 Node >= 4，通过 npm 全局安装

1	npm install -g elf-cli

但是，由于网络的原因，直接安装估计多半都会在安装 node-sass 和 phantomjs 这两个包时失败，所以，强烈推荐使用下面的命令安装

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

安装好后，可以运行 elf --help 查看支持的命令和帮助说明。

初始化项目

假如我们现在要做一个向下整页滑屏的 HTML5 项目

# 运行初始化命令，基于 swiper template 初始化项目
$ elf init -t swiper demo-swiper
# 进入项目目录，安装依赖
$ cd demo-swiper && npm install
# 运行（开发模式）
$ elf start

这样一个向下整页滑屏的 HTML5 项目就已运行在开发模式上，样式预处理自动编译、样式热加载等功能早已具备，
在此基础上，你就可以开始按照你的需求愉快的开发了。

部署
当项目开发完成之后，需要将代码合并压缩用于部署，运行
1
elf build
会生成一个 dist 文件夹用于部署。

整个流程下来，基本解决了 HTML5 项目开发过程中项目初始化和构建部分的重复工作，已在团队内广泛使用，包括 Q4 京东品牌运营的10多个 H5 项目，如


皇家视频	京东精选

功能介绍

ELF 主要包括三部分功能：项目构建、示例模板和通用组件。

项目构建

现在在做 web 开发时，基本都会引入构建工具，常用的有 grunt、gulp 以及目前最流行的 webpack，再配合各种插件，好处就不多说了，相信每个使用者都有自己的体会和心得。

ELF 基于 webpack 同时整合了

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
*-loader …

提供了

开发时样式热加载
支持 Sass、Less 和 Stylus 样式预处理自动编译
Autoprefixer 前缀补全
px -> rem 自动转换
雪碧图合成
自动获取图片 width 和 height
部署构建时图片压缩
部署构建时代码合并压缩

有了这些功能，可以让我们在开发时更多的专注于需求实现上。

示例模板

目前提供的 5 个模板项目

基础模板（base）
该示例展示了最基本的项目结构，没有提供额外的功能，可以通过该示例了解整个项目的构建
划屏模板（swiper）
滑屏示例，基于 swiper，可基于该项目初始化实现滑动翻屏的项目。
场景切换模板（switcher）
场景切换示例，基于 swiper 和 anime.js，可基于该项目初始化实现滑动场景切换的项目。
3D全景模板（panorama）
全景示例，基于 three.js 和 orientation.js，可基于该项目初始化实现重力感应配合全景的项目。
视频播放模板（video）
在手机上使用 video 标签播放视频的基础示例。

通过这些示例，可以快速初始化项目，你也可以根据自己的需求，定制自己的初始项目。

通用组件

在项目开发中，有些常用功能已被封装成通用组件，例如：swiper。
Github 上有大量优秀的开源组件，基本上能满足你所有需求，本着轮子不嫌多的精神，也造了两个

elf-preloader.js
预加载图片和音频
elf-orientation.js
处理重力感应

欢迎试用并提供问题或优化反馈~~

写在最后

项目最初的形态是由几个整理的典型示例组成，经过两次迭代重构后变成了现在的样子，在开发过程中的灵感主要来自 create-react-app，并借鉴了其 webpack 配置项。
后续计划把 示例模板 那块拆分出来（类似 vue-cli 那样以及基于 Electron 提供 GUI。

欢迎各位同学试用，特别是做 HTML5 场景营销活动的同学，如果在使用过程中遇到什么问题，欢迎提交 issues 和 PR,或者 FORK 构建自己的版本。

Github 地址

上次更新：2019-03-15 16:20:46