booxood / elf

灵活可扩展的 HTML5 构建工具

Home Page:https://elf.aotu.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

ELF-CLI NPM version

面向开发者的灵活可扩展的 HTML5 构建工具,提供命令行工具 elf(基于 Webpack),无需配置并可进行开发构建, 可用来制作各种 HTML5 场景营销活动页面,也可自由的通过模板和组件的组合来快速定制开发。

安装

提醒 由于依赖的包比较多,第一次安装耗时很长很长,请稍微耐心等待一下。 推荐使用淘宝的 npm 镜像进行安装,执行 npm 安装命令时带上 --registry=https://registry.npm.taobao.org。 另外 node-sassphantomjs 这两个包需要编译,可以设置 SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/PHANTOMJS_CDNURL=https://npm.taobao.org/mirrors/phantomjs/,安装已经编译好的版本。

# 全局安装 Node >= 4
$ 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 init demo

# 安装依赖
$ cd demo && npm install

# 运行
$ elf start
# 查看 help
$ elf --help

  Usage: elf [options] [command]


  Commands:

    init        init project
    list        list all templates
    start       run on develpoment mode
    build       build for production
    help [cmd]  display help for [cmd]

  Options:

    -h, --help     output usage information
    -V, --version  output the version number

  Examples:

    # Init project
    $ elf init

    # Base on template init project
    $ elf init -t panorama

    # See all templates
    $ elf list

    # See subcommand help
    $ elf help init

介绍

主要功能

  • 微信友好性

    主要针对移动端 HTML5 网页开发,并专门针对微信做了兼容

  • 响应式

    提供了两种方案:基于 REM,px 自动转换 REM;基于 Zoom,对需要缩放部分引用 class="__z"

    PS: 默认设计稿的宽度是 750px,如果有个按钮是的宽度是 80px,在设置这个按钮的宽度样式时,样式里直接按 80px 设置就好

  • 样式预处理

    支持 Sass、Less 或 Stylus 样式预处理语言及 autoprefixer

  • Webpack构建

    基于 Webpack 进行自动化构建。开发模式时,支持样式 hot reload;雪碧图合并。构建时,支持代码合并,代码压缩,图片压缩等特性

相关组件依赖

  • Zepto

    默认引入,其他可根据项目需求引入

基础目录结构

很多预制的功能与目录结构相关,请确认项目包含以下文件和目录,否则可能执行失败。

.
├── package.json
└── src
    ├── css
    │   └── main.scss               # 引入的样式文件(在 main.js 中)
    ├── img                         # 图片 资源的目录
    ├── plugin                      # 音频 资源的目录(可选)
    ├── index.html                  # html 模板
    └── js
        └── main.js                 # 入口 js 文件

查看更详细的说明

感谢

项目的灵感和某些 Webpack 的配置来自 create-react-app

许可

MIT

About

灵活可扩展的 HTML5 构建工具

https://elf.aotu.io

License:MIT License


Languages

Language:JavaScript 58.0%Language:CSS 27.0%Language:HTML 15.0%