
ELF – 灵活可扩展的 HTML5 构建工具
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 以及目前最流行的 […]