ELF - 灵活可扩展的 HTML5 构建工具

京东设计中心JDC · 公众号 · · 2017-08-15 15:57

正文

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

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

快速上手

安装

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

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 项目就已运行在开发模式上，样式预处理自动编译、样式热加载等功能早已具备，
在此基础上，你就可以开始按照你的需求愉快的开发了。
部署

当项目开发完成之后，需要将代码合并压缩用于部署，运行
```
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 ...