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

   <p style="text-align:center"><img src="https://simg.open-open.com/show/394a28128a3976066d09a59971396f7a.png"></p>    <p>ELF - 面向开发者的灵活可扩展的 HTML5 构建工具，提供命令行工具 elf（基于 Webpack）， <strong>无需构建配置文件并可进行开发</strong> ，可用来制作各种 HTML5 场景营销活动页面，也可自由的通过模板和组件的组合来快速定制开发。</p>    <h2>安装</h2>    <p>提醒 由于依赖的包比较多，第一次安装耗时很长很长，请稍微耐心等待一下。 推荐使用淘宝的 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/ ，安装已经编译好的版本。</p>    <pre>  <code class="language-dos"># 全局安装 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</code></pre>    <pre>  <code class="language-dos"># 查看 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</code></pre>    <h2>介绍</h2>    <h3>主要功能</h3>    <ul>     <li>开发时样式热加载</li>     <li>支持 Sass、Less 和 Stylus 样式预处理自动编译</li>     <li>Autoprefixer 前缀补全</li>     <li>px -> rem 自动转换</li>     <li>雪碧图合成</li>     <li>自动获取图片 width 和 height</li>     <li>部署构建时图片压缩</li>     <li>部署构建时代码合并压缩</li>    </ul>    <h3>相关组件依赖</h3>    <ul>     <li> <p><a href="/misc/goto?guid=4958185742165361000" rel="nofollow,noindex">Zepto</a></p> <p>默认引入，其他可根据项目需求引入</p> </li>    </ul>    <h3>基础目录结构</h3>    <p>很多预制的功能与目录结构相关，请确认项目包含以下文件和目录，否则可能执行失败。</p>    <pre>  <code class="language-dos">.  ├── package.json  └── src      ├── css      │   └── main.scss               # 引入的样式文件（在 main.js 中）      ├── img                         # 图片 资源的目录      ├── plugin                      # 音频 资源的目录（可选）      ├── index.html                  # html 模板      └── js          └── main.js                 # 入口 js 文件</code></pre>    <p><a href="/misc/goto?guid=4959735691784291583" rel="nofollow,noindex"><strong>查看更详细的说明</strong> </a></p>    <h2>感谢</h2>    <p>项目的灵感和某些 Webpack 的配置来自 <a href="/misc/goto?guid=4958996917562467082" rel="nofollow,noindex">create-react-app</a></p>    <h2>许可</h2>    <p>MIT</p>    <p> </p>    <p> </p>