HTML5開源：ELF-靈活可擴展的 HTML5 構建工具

ELF - 面向開發者的靈活可擴展的 HTML5 構建工具，提供命令行工具 elf（基于 Webpack）， 無需構建配置文件并可進行開發 ，可用來制作各種 HTML5 場景營銷活動頁面，也可自由的通過模板和組件的組合來快速定制開發。

安裝

提醒 由于依賴的包比較多，第一次安裝耗時很長很長，請稍微耐心等待一下。 推薦使用淘寶的 npm 鏡像進行安裝，執行 npm 安裝命令時帶上 --registry=https://registry.npm.taobao.org 。 另外 node-sass 和 phantomjs 這兩個包需要編譯，可以設置 SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ 和 PHANTOMJS_CDNURL=https://npm.taobao.org/mirrors/phantomjs/ ，安裝已經編譯好的版本。

# 全局安裝 Node >= 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 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

    # List all templates
    $ elf list

    # See subcommand help
    $ elf help init

介紹

主要功能

• 開發時樣式熱加載
• 支持 Sass、Less 和 Stylus 樣式預處理自動編譯
• Autoprefixer 前綴補全
• px -> rem 自動轉換
• 雪碧圖合成
• 自動獲取圖片 width 和 height
• 部署構建時圖片壓縮
• 部署構建時代碼合并壓縮

相關組件依賴

• Zepto

  默認引入，其他可根據項目需求引入

基礎目錄結構

很多預制的功能與目錄結構相關，請確認項目包含以下文件和目錄，否則可能執行失敗。

.
├── package.json
└── src
    ├── css
    │   └── main.scss               # 引入的樣式文件（在 main.js 中）
    ├── img                         # 圖片 資源的目錄
    ├── plugin                      # 音頻 資源的目錄（可選）
    ├── index.html                  # html 模板
    └── js
        └── main.js                 # 入口 js 文件

查看更詳細的說明

感謝

項目的靈感和某些 Webpack 的配置來自 create-react-app

許可

MIT