记得收藏【国际动画教程网】,赶快注册吧!
注册

合作站点账号登陆

QQ登录

只需一步,快速开始

扫一扫,访问微社区

快捷导航
查看: 6129|回复: 0
收起左侧

[HTML5/CSS3] HTML5开源:ELF-灵活可扩展的 HTML5 构建工具[含1P]

[复制链接]
发表于 2017-8-27 22:57:20 | 显示全部楼层 |阅读模式
<article>
                                        <html>
<head></head>
<body>
  <p style="text-align:center"></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 &gt;= 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 &amp;&amp; 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 -&gt; rem 自动转换</li>
   <li>雪碧图合成</li>
   <li>自动获取图片 width 和 height</li>
   <li>部署构建时图片压缩</li>
   <li>部署构建时代码合并压缩</li>
  </ul>
  <h3>相关组件依赖</h3>
  <ul>
   <li> <p><a href="http://zeptojs.com/" 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="https://github.com/o2team/elf/blob/master/doc/DETAIL.md" rel="nofollow,noindex"><strong>查看更详细的说明</strong> </a></p>
  <h2>感谢</h2>
  <p>项目的灵感和某些 Webpack 的配置来自 <a href="https://github.com/facebookincubator/create-react-app" rel="nofollow,noindex">create-react-app</a></p>
  <h2>许可</h2>
  <p>MIT</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</body>
</html><h2><strong>扩展阅读</strong></h2><a title=GitHub上整理的一些工具 href="/lib/view/open1447852696713.html"><span class=title>GitHub上整理的一些工具</span></a><br><a title=GitHub上整理的一些资料 href="/lib/view/open1416968753752.html"><span class=title>GitHub上整理的一些资料</span></a><br><a title=JavaScript 资源大全中文版 href="/lib/view/open1450791728776.html"><span class=title>JavaScript 资源大全中文版</span></a><br><a title=Android应用程序开发以及背后的设计思想深度剖析 href="/lib/view/open1466070376316.html"><span class=title>Android应用程序开发以及背后的设计思想深度剖析</span></a><br><a title=谈谈React.js的核心入门知识 href="/lib/view/open1439348816176.html"><span class=title>谈谈React.js的核心入门知识</span></a><br><h2><strong>为您推荐</strong></h2><a title=使用node-webkit构建桌面应用程序(一)  href="/lib/view/open1431769462779.html"><span class=title>使用node-webkit构建桌面应用程序(一) </span></a><br><a title=搭建一个免费的,无限流量的Blog----github pages和jekyll入门 href="/lib/view/open1453097204542.html"><span class=title>搭建一个免费的,无限流量的Blog----github Pages和Jekyll入门</span></a><br><a title=Express入门教程:一个简单的博客 href="/lib/view/open1454560780730.html"><span class=title>Express入门教程:一个简单的博客</span></a><br><a title=搭建一个免费的,无限流量的Blog----github pages和jekyll入门 href="/lib/view/open1345908888114.html"><span class=title>搭建一个免费的,无限流量的Blog----github Pages和Jekyll入门</span></a><br><a title=IP whois介绍和部署实践 href="/lib/view/open1466731053219.html"><span class=title>IP whois介绍和部署实践</span></a><br><h2><strong>更多</strong></h2><a title=HTML5 href="https://www.baidu.com/s?wd=site:open-open.com HTML5"><span class=title>HTML5</span></a><br><a title=PhantomJS href="https://www.baidu.com/s?wd=site:open-open.com PhantomJS"><span class=title>PhantomJS</span></a><br>
                                </article>




               
                        <div class="gitinfo"style="margin:15px 0;"></div>




上一篇:iChart--组件定制
下一篇:使用HTML5开发Kinect体感游戏
一起共享资源,共建精品资源平台。记得一定要收藏我们网站。www.gjdhjc.com ||||| 还有我们的网址导航:www.58q8.com【链接失效可以留言看到第一时间补帖,如果懒的回复我也是没办法了】

QQ|QQ群:133515734|站长博客|百度网盘|许进龙|手机触屏版|国际动画教程网 ( ICP13037175 )