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>
本文由用户 MegGott 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
转载本站原创文章,请注明出处,并保留原始链接、图片水印。
本站是一个以用户分享为主的开源技术平台,欢迎各类分享!