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

╰半夏微凉° 2022-05-21 11:11 167阅读 0赞

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

## 快速上手 ##

1.  安装
    
    ELF 支持 Node >= 4，通过 `npm` 全局安装
    
    <table style="border:none;font-style:inherit;font-family:inherit;font-size:12px;vertical-align:baseline;border-spacing:0px;"> 
     <tbody style="font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
      <tr style="border-top:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
       <td style="font-style:inherit;font-family:inherit;font-size:12px;vertical-align:baseline;color:rgb(51,51,51);"><pre style="border:none;font-style:inherit;font-family:'Input Mono', 'PT Mono', Consolas, Monaco, Menlo, monospace;vertical-align:baseline;background:rgb(247,247,247);color:rgb(102,102,102);line-height:1.6;text-align:right;"></pre> 
        <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
          1 
        </div></td> 
       <td style="font-style:inherit;font-family:inherit;font-size:12px;vertical-align:baseline;color:rgb(51,51,51);"><pre style="border:none;font-style:inherit;font-family:'Input Mono', 'PT Mono', Consolas, Monaco, Menlo, monospace;vertical-align:baseline;background:rgb(247,247,247);color:rgb(77,77,76);line-height:1.6;"></pre> 
        <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
          npm install -g elf-cli 
        </div></td> 
      </tr> 
     </tbody> 
    </table>
    
    但是，由于网络的原因，直接安装估计多半都会在安装 `node-sass` 和 `phantomjs` 这两个包时失败，所以，强烈推荐使用下面的命令安装
    
    <table style="border:none;font-style:inherit;font-family:inherit;font-size:12px;vertical-align:baseline;border-spacing:0px;"> 
     <tbody style="font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
      <tr style="border-top:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
       <td style="font-style:inherit;font-family:inherit;font-size:12px;vertical-align:baseline;color:rgb(51,51,51);"><pre style="border:none;font-style:inherit;font-family:'Input Mono', 'PT Mono', Consolas, Monaco, Menlo, monospace;vertical-align:baseline;background:rgb(247,247,247);color:rgb(102,102,102);line-height:1.6;text-align:right;"></pre> 
        <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
          1 
        </div> 
        <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
          2 
        </div> 
        <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
          3 
        </div> 
        <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
          4 
        </div></td> 
       <td style="font-style:inherit;font-family:inherit;font-size:12px;vertical-align:baseline;color:rgb(51,51,51);"><pre style="border:none;font-style:inherit;font-family:'Input Mono', 'PT Mono', Consolas, Monaco, Menlo, monospace;vertical-align:baseline;background:rgb(247,247,247);color:rgb(77,77,76);line-height:1.6;"></pre> 
        <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
         <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(142,144,140);"># mac/linux</span> 
        </div> 
        <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
          $ 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 
        </div> 
        <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
         <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(142,144,140);"># windows</span> 
        </div> 
        <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
          $ 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/ 
        </div></td> 
      </tr> 
     </tbody> 
    </table>
    
    安装好后，可以运行 `elf --help` 查看支持的命令和帮助说明。
2.  初始化项目
    
    假如我们现在要做一个向下整页滑屏的 HTML5 项目
    
    <table style="border:none;font-style:inherit;font-family:inherit;font-size:12px;vertical-align:baseline;border-spacing:0px;"> 
     <tbody style="font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
      <tr style="border-top:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
       <td style="font-style:inherit;font-family:inherit;font-size:12px;vertical-align:baseline;color:rgb(51,51,51);"><pre style="border:none;font-style:inherit;font-family:'Input Mono', 'PT Mono', Consolas, Monaco, Menlo, monospace;vertical-align:baseline;background:rgb(247,247,247);color:rgb(102,102,102);line-height:1.6;text-align:right;"></pre> 
        <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
          1 
        </div> 
        <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
          2 
        </div> 
        <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
          3 
        </div> 
        <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
          4 
        </div> 
        <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
          5 
        </div> 
        <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
          6 
        </div> 
        <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
          7 
        </div> 
        <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
          8 
        </div></td> 
       <td style="font-style:inherit;font-family:inherit;font-size:12px;vertical-align:baseline;color:rgb(51,51,51);"><pre style="border:none;font-style:inherit;font-family:'Input Mono', 'PT Mono', Consolas, Monaco, Menlo, monospace;vertical-align:baseline;background:rgb(247,247,247);color:rgb(77,77,76);line-height:1.6;"></pre> 
        <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
         <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(142,144,140);"># 运行初始化命令，基于 swiper template 初始化项目</span> 
        </div> 
        <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
          $ elf init -t swiper demo-swiper 
        </div> 
        <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"></div> 
        <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
         <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(142,144,140);"># 进入项目目录，安装依赖</span> 
        </div> 
        <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
          $ 
         <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(245,135,31);">cd</span> demo-swiper &amp;&amp; npm install 
        </div> 
        <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"></div> 
        <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
         <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(142,144,140);"># 运行（开发模式）</span> 
        </div> 
        <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
          $ elf start 
        </div></td> 
      </tr> 
     </tbody> 
    </table>
    
    这样一个向下整页滑屏的 HTML5 项目就已运行在开发模式上，样式预处理自动编译、样式热加载等功能早已具备，  
    在此基础上，你就可以开始按照你的需求愉快的开发了。
3.  部署
    
    当项目开发完成之后，需要将代码合并压缩用于部署，运行
    
    <table style="border:none;font-style:inherit;font-family:inherit;font-size:12px;vertical-align:baseline;border-spacing:0px;"> 
     <tbody style="font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
      <tr style="border-top:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
       <td style="font-style:inherit;font-family:inherit;font-size:12px;vertical-align:baseline;color:rgb(51,51,51);"><pre style="border:none;font-style:inherit;font-family:'Input Mono', 'PT Mono', Consolas, Monaco, Menlo, monospace;vertical-align:baseline;background:rgb(247,247,247);color:rgb(102,102,102);line-height:1.6;text-align:right;"></pre> 
        <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
          1 
        </div></td> 
       <td style="font-style:inherit;font-family:inherit;font-size:12px;vertical-align:baseline;color:rgb(51,51,51);"><pre style="border:none;font-style:inherit;font-family:'Input Mono', 'PT Mono', Consolas, Monaco, Menlo, monospace;vertical-align:baseline;background:rgb(247,247,247);color:rgb(77,77,76);line-height:1.6;"></pre> 
        <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
          elf build 
        </div></td> 
      </tr> 
     </tbody> 
    </table>
    
    会生成一个 `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][orientation.js]
    
    处理重力感应

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

## 写在最后 ##

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

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

[Github 地址][Github]

出处：凹凸实验室（ [https://aotu.io/notes/2017/01/17/elf/][https_aotu.io_notes_2017_01_17_elf]）

[ELF]: https://elf.aotu.io/
[swiper]: https://github.com/nolimits4web/Swiper
[anime.js]: https://github.com/juliangarnier/anime
[three.js]: https://github.com/mrdoob/three.js
[orientation.js]: https://github.com/o2team/elf-orientation.js
[elf-preloader.js]: https://github.com/o2team/elf-preloader.js
[create-react-app]: https://github.com/facebookincubator/create-react-app
[vue-cli]: https://github.com/vuejs/vue-cli
[Electron]: http://electron.atom.io/
[issues]: https://github.com/o2team/elf/issues
[Github]: https://github.com/o2team/elf
[https_aotu.io_notes_2017_01_17_elf]: https://aotu.io/notes/2017/01/17/elf/