o2team / Elf
Licence: mit
灵活可扩展的 HTML5 构建工具
Stars: ✭ 479
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Elf
Wolfbot
Crypto currency trading bot written in TypeScript for NodeJS
Stars: ✭ 335 (-30.06%)
Mutual labels: webpack, html5
Baumeister
👷 The aim of this project is to help you to build your things. From Bootstrap themes over static websites to single page applications.
Stars: ✭ 171 (-64.3%)
Mutual labels: webpack, build-tool
Create Elm App
🍃 Create Elm apps with zero configuration
Stars: ✭ 1,650 (+244.47%)
Mutual labels: webpack, build-tool
Webpack
A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.
Stars: ✭ 60,034 (+12433.19%)
Mutual labels: webpack, build-tool
Buildpipeline
AWS-powered serverless build, test and deploy pipeline ft. multiple environments
Stars: ✭ 105 (-78.08%)
Mutual labels: webpack, build-tool
Neutrino
Create and build modern JavaScript projects with zero initial configuration.
Stars: ✭ 3,844 (+702.51%)
Mutual labels: webpack, build-tool
Ykit
基于 Webpack 的灵活快速的打包工具,帮助稳定高效构建现代 JavaScript 应用。
Stars: ✭ 375 (-21.71%)
Mutual labels: webpack, build-tool
Happypack
Happiness in the form of faster webpack build times.
Stars: ✭ 4,232 (+783.51%)
Mutual labels: webpack, build-tool
Vue Meizi
vue最新实战项目,vue2 + vuex + webpack + es6 干货多多,新手福利
Stars: ✭ 1,476 (+208.14%)
Mutual labels: webpack, html5
Webpack Interview Questions
Webpack questions/answers you can use to prepare for interviews or test your knowledge.
Stars: ✭ 159 (-66.81%)
Mutual labels: webpack, build-tool
How To Setup Webpack 2
🔧 ⚙ Tutorial to setup webpack 2 from scratch.
Stars: ✭ 107 (-77.66%)
Mutual labels: webpack, build-tool
Html5 Boilerplate
A simple, fast, modern, pure html, css (and sass), js, live reload starter template
Stars: ✭ 65 (-86.43%)
Mutual labels: webpack, html5
Nodeppt
This is probably the best web presentation tool so far!
Stars: ✭ 9,589 (+1901.88%)
Mutual labels: webpack, html5
Vue Shiyanlou
😘基于vue2和vuex的复杂单页面应用,20+页面53个API(仿实验楼)✨✨
Stars: ✭ 342 (-28.6%)
Mutual labels: webpack, html5
X Build
🖖 Customizable front-end engineering scaffolding tools
Stars: ✭ 436 (-8.98%)
Mutual labels: webpack, 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 >= 6
# 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
介绍
主要功能
- 开发时样式热加载
- 支持 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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].