ELF,意为小精灵,来自 War3
中暗夜精灵族的农民。
通常当我们开始一个新的 HTML5 场景营销活动项目时,需要创建项目目录,初始化基本的项目文件,然后再添加构建(grunt/gulp/webpack)相关的文件(一次两次三次…,像小精灵采木一样~),目前有不少工具可以帮我们解决一部分这种重复性的工作,但不能完全的解决,于是,就有了小精灵 – ELF。
快速上手
1. 安装
通过 npm
全局安装(依赖的包比较多,推荐使用淘宝的 npm 镜像进行安装)
1 2 3 4 |
# 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
查看支持的命令和帮助说明。
2. 初始化项目
假如我们现在要做一个向下整页滑屏的 HTML5 项目
1 2 3 4 5 6 |
# 运行初始化命令,基于 swiper template 初始化项目 $ elf init -t swiper demo-swiper # 进入项目目录,安装依赖 $ cd demo-swiper && npm install # 运行(开发模式) $ elf start |
这样一个向下整页滑屏的 HTML5 项目就已运行在开发模式上,样式预处理自动编译、样式热加载等功能早已具备,在此基础上,你就可以开始按照你的需求愉快的开发了。
3. 部署
当项目开发完成之后,需要将代码合并压缩用于部署,运行
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
- 部署构建时图片压缩
- 部署构建时代码合并压缩
- 等等
有了这些功能,可以让我们在开发时更多的专注于需求实现上。
示例模板
为便于快速初始化项目,提供了一些模板项目
- 基础模板(base)该示例展示了最基本的项目结构,没有提供额外的功能,可以通过该示例了解整个项目的构建
- 划屏模板(swiper)滑屏示例,基于 swiper, 可基于该项目初始化实现滑动翻屏的项目。
- 场景切换模板(switcher)场景切换示例,基于 swiper 和 anime.js,可基于该项目初始化实现滑动场景切换的项目。
- 3D全景模板(panorama)全景示例,基于 three.js 和 orientation.js,可基于该项目初始化实现重力感应配合全景的项目。
- 视频播放模板(video)在手机上使用
video
标签播放视频的基础示例。 - 多页面模板(multiple-page) 生成多页面示例。
- React 模板(react)构建 React 项目示例。
通过这些示例,可以快速初始化项目,你也可以根据自己的需求,定制自己的初始项目。
通用组件
在项目开发中,有些常用功能已被封装成通用组件,例如:swiper。
Github
上有大量优秀的开源组件,基本上能满足你所有需求,本着轮子不嫌多的精神,也造了两个
- elf-preloader.js预加载图片和音频
- elf-orientation.js处理重力感应
欢迎试用并提供问题或优化反馈~~
写在最后
项目最初的形态是由几个整理的典型示例组成,经过两次迭代重构后变成了现在的样子,在开发过程中的灵感主要来自 create-react-app。
欢迎各位同学试用,特别是做 HTML5 场景营销活动的同学,如果在使用过程中遇到什么问题,欢迎提交 issues
和 PR
,或者 FORK
构建自己的版本。