ELF 靈活可擴充套件的 HTML5 構建工具

2021-08-21 06:09:21 字數 2123 閱讀 1809

通常當我們開始乙個新的 html5 場景營銷活動專案時,需要建立專案目錄,初始化基本的專案檔案,然後再新增構建(grunt/gulp/webpack)相關的檔案(一次兩次三次…,像小精靈採木一樣~),

目前有不少工具可以幫我們解決一部分這種重複性的工作,但不能完全的解決,於是,就有了小精靈 - elf

,官網:elf.aotu.io。

安裝elf 支援 node >= 4,通過npm全域性安裝

1

npm install -g elf-cli

但是,由於網路的原因,直接安裝估計多半都會在安裝node-sassphantomjs這兩個包時失敗,所以,強烈推薦使用下面的命令安裝

1

2

3

4

# mac/linux

$ sass_binary_site= phantomjs_cdnurl= npm install -g elf-cli --registry=

# windows

$ npm install -g elf-cli --registry= --sass_binary_site= --phantomjs_cdnurl=

安裝好後,可以執行elf --help檢視支援的命令和幫助說明。

初始化專案

假如我們現在要做乙個向下整頁滑屏的 html5 專案

1

2

3

4

5

6

7

8

# 執行初始化命令,基於 swiper template 初始化專案

$ elf init -t swiper demo-swiper

# 進入專案目錄,安裝依賴

$ cd demo-swiper && npm install

# 執行(開發模式)

$ elf start

這樣乙個向下整頁滑屏的 html5 專案就已執行在開發模式上,樣式預處理自動編譯、樣式熱載入等功能早已具備,

在此基礎上,你就可以開始按照你的需求愉快的開發了。

部署當專案開發完成之後,需要將**合併壓縮用於部署,執行

1

elf build

會生成乙個dist資料夾用於部署。

整個流程下來,基本解決了 html5 專案開發過程中專案初始化和構建部分的重複工作,已在團隊內廣泛使用,包括 q4 京東品牌運營的10多個 h5 專案,如

京東精選

elf 主要包括三部分功能:專案構建、示例模板和通用元件。

現在在做 web 開發時,基本都會引入構建工具,常用的有gruntgulp以及目前最流行的webpack,再配合各種外掛程式,好處就不多說了,相信每個使用者都有自己的體會和心得。

elf 基於webpack同時整合了

提供了有了這些功能,可以讓我們在開發時更多的專注於需求實現上。

目前提供的 5 個模板專案

通過這些示例,可以快速初始化專案,你也可以根據自己的需求,定製自己的初始專案。

在專案開發中,有些常用功能已被封裝成通用元件,例如:swiper。

github上有大量優秀的開源元件,基本上能滿足你所有需求,本著輪子不嫌多的精神,也造了兩個

歡迎試用並提供問題或優化反饋~~

那樣以及基於electron提供 gui。

歡迎各位同學試用,特別是做 html5 場景營銷活動的同學,如果在使用過程中遇到什麼問題,歡迎提交issuespr,或者fork構建自己的版本。

github 位址

出處:凹凸實驗室(

ELF 靈活可擴充套件的 HTML5 構建工具

elf,意為小精靈,來自war3中暗夜精靈族的農民。通常當我們開始乙個新的 html5 場景營銷活動專案時,需要建立專案目錄,初始化基本的專案檔案,然後再新增構建 grunt gulp webpack 相關的檔案 一次兩次三次 像小精靈採木一樣 目前有不少工具可以幫我們解決一部分這種重複性的工作,但...

ELF 靈活可擴充套件的 HTML5 構建工具

elf,意為小精靈,來自war3中暗夜精靈族的農民。通常當我們開始乙個新的 html5 場景營銷活動專案時,需要建立專案目錄,初始化基本的專案檔案,然後再新增構建 grunt gulp webpack 相關的檔案 一次兩次三次 像小精靈採木一樣 目前有不少工具可以幫我們解決一部分這種重複性的工作,但...

HTML5屬性擴充套件總結

1.accesskey index accesskey 屬性規定啟用 使元素獲得焦點 元素的快捷鍵 2.tabindex onetwo three tabindex 屬性規定元素的 tab 鍵控制次序 當 tab 鍵用於導航時 tabindex屬性可以設定鍵盤中的tab鍵在控制項中的移動順序,即焦點...